JavaScript之面向对象学习二(原型属性对象与in操作符)获取对象中所有属性的方法

时间:2022-01-20 22:13:01

1、原型属性对象于in操作符之in单独使用

有两种方式使用in操作符:单独使用和在for-in循环中使用。在单独使用中,代码如下:

   function Person(){
}
Person.prototype.name="张三";
Person.prototype.age=22;
Person.prototype.job="coder";
Person.prototype.sayName=function(){
alert(this.name);
} var person1=new Person();
var person2=new Person();
alert(person1.hasOwnProperty("name")); //输出:false,因为person1并没有自己的实例属性!
alert("name" in person1); //输出:true,因为person1含有[[Prototype]]属性,该属性是一个指针,指向Person构造函数的原型属性对象。
// person1所指向的原型属性对象里面含有name属性,所以person1实例能够访问"name"属性。 person1.name="李四";
alert(person1.name); //输出"李四", 因为person1.name="李四";给person1实例定义了一个name属性,该属性将原型属性对象中的name属性屏蔽了
//屏蔽的原因是当执行person1.name代码时,JS会先到person1实例中寻找name属性,如果实例中没有该属性,则会去原型属性对象中寻找name属性
//所以这里在person1实例中找到了name属性,则JS就不会再去原型属性对象那个中寻找该属性,原型对象中的同名属性就会被忽略 alert(person1.hasOwnProperty("name"));//输出:true 因为person1.name="李四"给person1实例定义了一个实例属性
alert("name" in person1);//输出:true person1实例对象里面含有name属性,所以"name"属性可以访问 alert(person2.name);
alert(person2.hasOwnProperty("name")); //输出:false person2实例没有自己的实例属性
alert("name" in person2); //输出:true person2所指向的原型属性对象里面含有name属性,所以person1实例能够访问"name"属性。 delete person1.name;
alert(person1.hasOwnProperty("name")); //输出:false 因为delete person1.name;person1的实例被删除,所以此时person1没有实例属性
alert("name" in person1); ////输出:true person1所指向的原型属性对象里面含有name属性,所以person1实例能够访问"name"属性。

观察上面的代码我们发现,当in操作符单独使用的时候有一个规律如下:

属性    in   对象的实例

他的用法就是:判断这个属性能否被对象的实例所访问到,如果对象实例能访问到属性返回true,如果不能返回false;

注意:这里的属性可以是对象实例的属性,也可以是对象实例的[[Prototype]]属性指针,所指向的原型对象;

下面是结合Object.hasOwnProperty()和in判断一个属性到底是实例属性,还是实例对应原型对象的额属性,代码如下:

function Person(){
}
Person.prototype.name="张三";
Person.prototype.age=22;
Person.prototype.job="coder";
Person.prototype.sayName=function(){
alert(this.name);
}
var person1=new Person();
var person2=new Person();
/*
@param object ---对象的实例名
@param name ---需要判断的对象属性
功能:判断name是实例的原型属性对象的属性还是实例的实例属性
*/
function hasPrototypePrototype(object,name){
return !object.hasOwnProperty(name) && (name in object);
}
alert(hasPrototypePrototype(person1,"name")); //输出:true 说明person1能访问"name"属性,person1的实例属性中没有"name"属性,说明"name"属性是原型对象中属性
person1.name="李四";
alert(hasPrototypePrototype(person1,"name")); //输出:false 有两种情况 1、"name"属性既不是实例属性,也不是原型对象属性 2、person1能访问"name"属性,person1有"name"属性

2、原型属性对象与与in操作符之for-in结合使用

在使用for-in循环时,返回的是所有能够通过对象访问的、可枚举的属性,既包括实例中的属性又包括原型对象中的属性;

注意:屏蔽了原型中不可枚举属性(即将[[Enumerable]]设置为false的属性)也会在for-in循环中返回,因为根据规定,所有开发人员定义的属性都是可枚举的---只有IE8即更早版本中例外

代码如下:

  var o={
toString:function(){
return "My Object";
}
}
for(var property in o){
if(property=="toString"){
alert("Found toString"); //在IE8 中不显示
}
}

输出:Found toString,

注意:在IE中存在一个bug,因为其实现认为原型的toString()方法被打上了值为false的[[Enumerable]]标记(所以该属性无法被循环),因此应该跳过该属性,所以我们就看不到警告框,所以该bug会影响默认不可枚举的所有属性和方法,包括:hasOwnProperty()、propertyIsEnumerable()、toLocaleString、toString、valueOf()。

ECMAScript 5也将constructor和prototype属性的[[Enumerable]]特性设置为false,但并不是所有的浏览器都照此实现。

3、使用Object.keys()方法获取指定对象中所有可枚举的实例属性

ECMAScript 5中提供了Object.keys()方法。这个方法接收一个对象作为参数,返回一个包含所有可枚举属性的字符串数组,代码如下:

    function Person(){
}
Person.prototype.name="张三";
Person.prototype.age=22;
Person.prototype.job="coder";
Person.prototype.sayName=function(){
alert(this.name);
}
var keys=Object.keys(Person.prototype); //Person.prototype =》获取Person构造函数的原型属性对象 ;
//Object.keys(Person.prototype)=》获取原型属性对象的所有属性名,是键不是值
alert(keys); //输出name、age、job、sayName var person=new Person();
person.name="李四";
person.age=22;
var personkeys=Object.keys(person); //获取person实例的属性不包含其原型对象的属性。
alert(personkeys); //输出:name、age var allkeys=Object.getOwnPropertyNames(Person.prototype); //获取Person构造函数原型对象的所有属性(包括不可枚举的属性([[Enumerable]]设为false的属性))
alert(allkeys);//输出:constructor,name,age,job,sayName 注意:在ECMAScript 5中constructor属性是不可枚举的

JavaScript之面向对象学习二(原型属性对象与in操作符)获取对象中所有属性的方法的更多相关文章

  1. JavaScript之面向对象学习一

    1.通过Object构造函数和对象字面量来创建对象缺点:使用同一个接口创建很多的对象,会产生大量的重复代码.比如我需要创建人的对象,并且需要三类人,医生.工程师.老师,他们可以抽象出很多属性,比如姓名 ...

  2. 【NX二次开发】UF_OBJ_ask_display_properties获取对象所在层、获取对象颜色、获取对象是否隐藏、获取对象是否高亮,获取对象线宽、字体大小

    UF_OBJ_ask_display_properties 返回一个对象的显示属性(层.颜色.隐藏状态.线宽和字体). UF_OBJ_disp_props_p_t结构体: layer int 对象所在 ...

  3. JavaScript之面向对象学习七(动态原型模式、寄生构造函数模式、稳妥构造函数模式创建自定义类型)

    一.动态原型模式 在面向对象学习六中的随笔中,了解到组合构造函数模式和原型模式创建的自定义类型可能最完善的!但是人无完人,代码亦是如此! 有其他oo语言经验的开发人员在看到独立的构造函数和原型时,很可 ...

  4. JavaScript之面向对象学习六原型模式创建对象的问题,组合使用构造函数模式和原型模式创建对象

    一.仔细分析前面的原型模式创建对象的方法,发现原型模式创建对象,也存在一些问题,如下: 1.它省略了为构造函数传递初始化参数这个环节,结果所有实例在默认的情况下都将取得相同的属性值,这还不是最大的问题 ...

  5. JavaScript之面向对象学习四原型对象的动态性

    1.由于在原型中查找值的过程是一次搜索,因此我们对原型对象所做的任何修改都能够立即从实例上反映出来---即便是先创建了实例后修改原型也是如此.代码如下: function Person(){ } va ...

  6. JavaScript的面向对象原理之原型链详解

    一.引言 在16年的10月份,在校内双选会找前端实习的时候,hr问了一个问题:JavaScript的面向对象理解吗?我张口就说“JavaScript是基于原型的!”.然后就没什么好说的了,hr可能不知 ...

  7. JavaScript的面向对象原理之原型链

    二.JavaScript的对象 为了能够清楚的解释这一切,我先从对象讲起.从其他面向对象语言(如Java)而来的人可能认为在JS里的对象也是由类来实例化出来的,并且是由属性和方法组成的. 实际上在JS ...

  8. android NDK 实用学习(二)-java端对象成员赋值和获取对象成员值

    1,关于java端类及接口定义请参考: android NDK 实用学习-获取java端类及其类变量 2,对传过来的参数进行赋值: 对bool类型成员进行赋值  env->SetBooleanF ...

  9. JavaScript之面向对象学习三原型语法升级

    1.到目前为止,我们是时候分析下前面的使用原型语法来定义对象有哪些不足的地方,代码如下: function Person(){ } Person.prototype.name="张三&quo ...

随机推荐

  1. Xmarks Hosts

    使用 Chrome 浏览器,但实在是没精力去各种FQ和寻找 Google 的 hosts 来同步书签,没办法只好折中使用 Xmarks 来单独同步书签,没想到最近 Xmarsks 又不好使了.再次标记 ...

  2. 常用CSS居中

    1.flex方法: .center_fix { display:flex; align-items:center; justify-content: center; } 具体flex方法教程:可以参见 ...

  3. shenben语录

    1.别让别人的一句话将你击垮! 2.任何人都不能替你做决定,除了你自己! 3.对于省选: 想去就去,文化课什么的都不是问题. 如果不去,二十年后的自己一定会后悔的.

  4. Delphi中Format与FormatDateTime函数详解

    copy:http://hi.baidu.com/yunfanleo/blog/item/0c51d9cdbc0531550eb34558.html Format是一个很常用,却又似乎很烦的方法,本人 ...

  5. 用cmd命令合并N个文件

    今天早上朋友发我一篇小说(42个TXT文件),让我给他合并为一个文件.我首先想到的是“Copy”命令,它可以复制文件,也可以合并文件. 例如:合并1.txt和2.txt到12.txt(其为ASCII文 ...

  6. 15 个最佳的 jQuery 表格插件

    现如今,网站开发设计的需求会要求自动适应所有移动设备,即响应式网站: 在开发网站时必须考虑对平板设备融合 fluid(流)和自适应性特点. 大多数网站设计要靠margins, guides, rows ...

  7. 从零开始学android开发-View的setOnClickListener的添加方法

    1)第一种,也是最长见的添加方法(一下都以Button为例) Button btn = (Button) findViewById(R.id.myButton); btn .setOnClickLis ...

  8. How To Cluster Rabbit-MQ--reference

    Foreword This explanation of clustering Rabbit-MQ assumes that you’ve had some experience with Rabbi ...

  9. js中return;、return true、return false;区别

    一.返回控制与函数结果, 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果  二.返回控制, 无函数结果,语法为:return;  在大多数情况下,为事件 ...

  10. Spring Tool Suit 在Eclipse上的安装

    登录http://spring.io/tools/sts/all 下载所需的Spring Tool Suit安装包 我用的是springsource-tool-suite-3.6.1.RELEASE- ...