一. prototype属性

prototype 存在于构造函数中 (其实任意函数中都有,只不过不是构造函数的时候prototype我们不关注而已) ,他指向了这个构造函数的原型对象。

参考前面的示意图。


二. constructor属性

constructor属性存在于原型对象中,他指向了构造函数

看下面的代码:

function Person () {
}
alert(Person.prototype.constructor === Person);    // true
var p1 = new Person();
//使用instanceof 操作符可以判断一个对象的类型。  
//typeof一般用来获取简单类型和函数。而引用类型一般使用instanceof,因为引用类型用typeof 总是返回objece。
alert(p1 instanceof Person);    // true
alert(typeof p1); // object

我们根据需要,可以为Person.prototype 属性指定新的对象,来作为Person的原型对象。

但是这个时候有个问题,新的对象的constructor属性则不再指向Person构造函数了。

看下面的代码:

function Person () {

}
//直接给Person的原型指定对象字面量。则这个对象的constructor属性不在执行Person函数
Person.prototype = {
    name:"志玲",
    age:20
};
var p1 = new Person();
alert(p1.name);  // 志玲
// p1的类型仍然是Person
alert(p1 instanceof Person); // true
//constructor不再执行Peson函数
alert(Person.prototype.constructor === Person); //false
//如果constructor对你很重要,你应该在Person.prototype中添加一行这样的代码:
      /*
      Person.prototype = {
          constructor : Person    //让constructor重新指向Person函数
      }
      */

三. __proto__ 属性(注意:左右各是2个下划线)

​用构造方法创建一个新的对象之后,这个对象中默认会有一个不可访问的属性 [[proto]], 这个属性就指向了构造方法的原型对象。

但是在个别浏览器中,也提供了对这个属性[[proto]]的访问(chrome浏览器和火狐浏览器。ie浏览器不支持)。访问方式:p1.__proto__

但是开发者尽量不要用这种方式去访问,因为操作不慎会改变这个对象的继承原型链。

function Person () {

}
//直接给Person的原型指定对象字面量。则这个对象的constructor属性不在执行Person函数
Person.prototype = {
    constructor : Person,
    name:"志玲",
    age:20
};
var p1 = new Person();

alert(p1.__proto__ === Person.prototype);    //true

四. hasOwnProperty() 方法

大家知道,我们用去访问一个对象的属性的时候,这个属性既有可能来自对象本身,也有可能来自这个对象的[[proto]]属性指向的原型。

那么如何判断这个对象的来源呢?

hasOwnProperty方法,可以判断一个属性是否来自对象本身。


<script type="text/javascript">
    function Person () {

    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";
      //sex属性是直接在p1属性中添加,所以是true
    alert("sex属性是对象本身的:" + p1.hasOwnProperty("sex"));
      // name属性是在原型中添加的,所以是false
    alert("name属性是对象本身的:" + p1.hasOwnProperty("name"));
      //  age 属性不存在,所以也是false
    alert("age属性是存在于对象本身:" + p1.hasOwnProperty("age"));

</script>

所以,通过hasOwnProperty这个方法可以判断一个属性是否在对象本身添加的,但是不能判断是否存在于原型中,因为有可能这个属性不存在。

也即是说,在原型中的属性和不存在的属性都会返回fasle。

这个也是唯一的一个处理属性而不查找原型链的方法!

如何判断一个属性是否存在于原型中呢?


五. in 操作符

in操作符用来判断一个属性是否存在于这个对象中。

但是在查找这个属性时候,先在对象本身中找,如果对象找不到再去原型中找。

换句话说,只要对象和原型中有一个地方存在这个属性,就返回true


function Person () {

}
Person.prototype.name = "志玲";
var p1 = new Person();
p1.sex = "女";
alert("sex" in p1);        // 对象本身添加的,所以true
alert("name" in p1);    //原型中存在,所以true
alert("age" in p1);     //对象和原型中都不存在,所以false

回到前面的问题,如何判断一个属性是否存在于原型中:

如果一个属性存在,但是没有在对象本身中,则一定存在于原型中。

function Person () {
}
Person.prototype.name = "志玲";
var p1 = new Person();
p1.sex = "女";

//定义一个函数去判断原型所在的位置
function propertyLocation(obj, prop){
    if(!(prop in obj)){
        alert(prop + "属性不存在");
    }else if(obj.hasOwnProperty(prop)){
        alert(prop + "属性存在于对象中");
    }else {
        alert(prop + "对象存在于原型中");
    }
}
propertyLocation(p1, "age");
propertyLocation(p1, "name");
propertyLocation(p1, "sex");

Copyright © 李振超 2018 all right reserved,powered by Gitbook
该文件最后修订时间: 2018-10-18 03:19:29

results matching ""

    No results matching ""