美文网首页
前端高频面试题之——原型链

前端高频面试题之——原型链

作者: Kagashino | 来源:发表于2017-02-26 23:00 被阅读0次

    JavaScript中的构造函数

    原型是什么

    面向对象语言中,类派生实例,JavaScript的函数可以作为构造器(构造函数),由函数派生实例。

    function Person (name,gender) {
      this.name = name;
      this.gender = gender;
      this.say = function () {
        console.log('hello Im ' + this.name)
      }
    }
    
    var laowang  = new Person('老王','男');
    laowang.say() // hello Im 老王
    

    此外,函数还自带一个prototype属性,你会发现Person.prototype是一个对象

    console.log(Person.prototype) // {constructor:f}
    

    这就是函数的原型对象,对原型对象添加属性,所有通过该函数实例化的对象,都可访问:

    Person.prototype.sayGoodbye = function () {
      console.log('see you next time!')
    }
    
    var laoli = new Person ('老李','男')
    var xiaohong = new Person('小红','女')
    
    laoli.sayGoodbye() //'see you next time!'
    xiaohong.sayGoodbye() //'see you next time!'
    

    原型对象属性与对象自身属性的区别:

    上面代码中,say是自身属性,sayGoodbye是原型对象属性。看看下面的对比就明白了:

    laoli.say === xiaohong.say // false
    laoli.sayGoodbye === xiaohong.sayGoodbye // true
    
    laoli.sayGoodbye === Person.prototype.sayGoodbye // true,小红亦然
    

    函数say,放在对象里,每次实例化都要新声明一个函数,然而在prototype中的sayGoodbye只有一个,看图一目了然:

    prototype.png

    所以将公用的属性、方法放入原型对象中,才会避免多余的资源开销;

    原型链是什么

    小红、老李2个实例都有一个属性:

    __proto__
    

    他指向构造函数(Person)的原型对象:

    xiaohong.__proto__ === Person.prototype // true
    laoli.__proto__ === Person.prototype // true
    

    所以,我们访问laoli.sayGoodbye ,可以理解成是通过laoli.__proto__找到了sayGoodbye方法,才得以访问。
    完善刚才的图:


    prototype.png

    我们之前说过,一个函数的prototype叫啥?原型对象,既然原型对象也是对象,当然也能引用__proto__:

    laoli.__proto__.__proto__ === Object.prototype // true
    

    可以看到,所有的对象,沿着proto一直引用下去,最终都会指向Object.prototype,所以laoli也可以访问Object.prototype中的属性,如toString、hasOwnProperty等;

    小结:

    访问一个对象的属性时,首先访问自身属性,自己没有,找__proto__中的属性,__proto__也没有,继续往__proto__的__proto__找(爸爸的爸爸叫爷爷),一直到Object.prototype为止;

    还没完

    别忘了,JavaScript中,万物皆对象,函数Person也不例外,它是由Function构造出来的,而Function,其实也是一个函数实例,他跟数组实例、对象实例等其他非基本数据类型,全部由Object构造

    (function a (){}) instanceof Object // true
    [1,2,3,4] instanceof Object // true
    ({a:1,b:2}) instanceof Object // true
    

    明白了吧,实际上,不管是声明数字、字符串、数组、对象包括函数,全是new出来的,详见JavaScript数据类型的构造(原始类型通过valueOf转换):

    'abc' 等价于 new String('abc').valueOf()
    true 等价于 new Boolean(true).valueOf()
    123 等价于 new Number(123).valueOf()
    [1,2,3,4] 等价于 new Array(1,2,3,4)
    function (a,b){return a+b} 等价于 new Function('a','b','return a+b')
    ......

    关于null

    Object的祖宗,也是所有对象实际的祖宗(太极生两仪)要把这个东西写清楚又是另一个大坑,日后再谈。

    相关文章

      网友评论

          本文标题:前端高频面试题之——原型链

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