美文网首页
任务二十三 原型与原型链

任务二十三 原型与原型链

作者: 23f43267337f | 来源:发表于2019-02-09 16:52 被阅读0次

    一、普通对象和函数对象

    在Javascript,万物皆可看做对象。对象可以分成普通对象和函数对象。可以这样理解,凡是通过 new Function()构造的对象都是函数对象,其他都是普通对象。

    二、构造函数

    function Person(name) {
      this.name = name;
    }
    var p1 = new Person('jack')
    var p2 = new Person('john')
    

    p1和p2是Person构造出来的实例,故而有

    p1.__proto__ === Person.prototype
    p1.constructor == Person
    

    三、prototype__proto__

    在js中每个对象都有预先定义共用的属性,储存在构造函数的prototype属性中,这个属性指向原型对象。prototype原型对象里的constructor指向构造函数本身。

    function Person(nick, age){
        this.nick = nick;
        this.age = age;
    }
    Person.prototype.sayName = function(){
        console.log(this.nick);
    }
    var p1 = new Person('Byron', 20);
    var p2 = new Person('Casper', 25);
    p1.sayName()  // Byron
    p2.sayName()  // Casper
    

    Person.prototypesayName()方法,p1由Person构造,故而直接可以共用。因为p1有__proto__属性直接指向Person.prototype,即p1.__proto__===Person.prototype
    于是可以得到这些结论

    • 定义任意函数,其__proto__属性与Function.prototype相等。
    function f() {}
     f.__proto__ === Function.prototype  //true
    
    • 定义任意普通对象,其__proto__与 Object.prototype比较
     var obj = {}
     obj.__proto__ === Object.prototype  //true
    
    • 函数Person的__proto__属性指向Function.prototype
    Person.__proto__ === Function.prototype //true
    Object.__proto__ === Function.prototype //true
    Number.__proto__ === Function.prototype  // true
    Boolean.__proto__ === Function.prototype // true
    String.__proto__ === Function.prototype  // true
    Array.__proto__ === Function.prototype   // true
    

    原型对象Person.prototype的__proto__属性指向Object.prototype

    Person.prototype.__proto__ === Object.prototype //true
    Function.prototype.__proto__ === Object.prototype //true
    

    输出Object.prototype.__proto__的值

     console.log(Object.prototype.__proto__)  //null
    

    四、构造对象

    JS中有很多不同的构造器,其都有自己的prototype属性。

    var b = new Array();
    b.constructor === Array;
    b.__proto__ === Array.prototype;
    
    var c = new Date(); 
    c.constructor === Date;
    c.__proto__ === Date.prototype;
    
    var d = new Function();
    d.constructor === Function;
    d.__proto__ === Function.prototype;
    
    var e = new Number();
    e.constructor === Number;
    e.__proto__ === Number.prototype;
    
    var f = new String();
    f.constructor === String;
    f.__proto__ === String.prototype;
    
    var h = new Boolean();
    h.constructor === Boolean;
    h.__proto__ === Boolean.prototype;
    

    五、原型链

    举个例子

    var arr = [1,2,3]
    arr.valueOf()  //  [1, 2, 3]
    

    arr自身没有没有定义valueOf()方法,但是能实现,我们就从arr.__proto__指向的Array.prototype

    Array.prototype
    然而并没有,再从Array.__proto__指向的Object.prototype里面找。
    Object.prototype
    这里就出现了valueOf()
    由此就形成了原型链。

    相关文章

      网友评论

          本文标题:任务二十三 原型与原型链

          本文链接:https://www.haomeiwen.com/subject/yyrmsqtx.html