阅读 15

原型链笔记

demo1(proto

let foo = {name:'lfz',age:26,sex:'男'}
let bar = {name:'xxx'}

bar.__proto__ = foo
console.log(bar.age)//输出26
console.log(bar.name)//输出xxx
复制代码
  • 可把__proto__理解为链子,demo1中bar继承了foo内的属性。

demo2(proto

let a = {
        x: 10,
        calc: function(z){
            return this.x + this.y +z
        }
    }

    let b = {
        y: 20,
        __proto__: a
    }

    console.log(b.calc(40)) //输出70
复制代码
  • __proto__还可以继承方法,这是类似对象的继承

demo3(prototype)

//声明一个对象
function Foo(y){
    this.y = y
}

Foo.prototype.x = 10

Foo.prototype.calc = function(z){
    return this.x + this.y + z
}
//实例化对象
var bar = new Foo(20)
bar.calc(30)// 50 
console.log(Foo.prototype===bar.__proto__) //true
console.log(45, bar.constructor === Foo) //true

复制代码
  • 由此可见,prototype指向的是构造方法对象
  • __proto__指向的是普通对象。

  • bar不单单绑定了__proto___,还绑定了constructo

简单总结

  • __proto__指向一个实际对象,一个原型链接,寻找属性方法的。
  • prototype指向构造方法,new一个对象时构造__proto__用的。
  • Foo.prototype = bar.proto
  • bar.constructor = Foo

寄生组合继承 es5

/**
     *
     * @param name
     * @param age
     */
    function PersonA({name, age}) {
        this.name = name
        this.age = age
    }

    /**
     *
     * @param name
     * @param age
     * @param sex
     * @constructor
     */
    function PersonB({name, age, sex = '男'}) {
        PersonA.call(this, {name, age})//让PersonA的this指向PersonB
        this.sex = sex
    }
    PersonB.prototype = Object.create(PersonA.prototype)
    let pB = new PersonB({name:'sxy', age: 26, sex: '女'})
    
    console.log(45, pB)//{name: "sxy", age: 26, sex: "女"}
复制代码
  • 1、先要让Person_A的this指向Person_B,还要传参
  • 2、然后通过prototype来进行对象构建
关注下面的标签,发现更多相似文章
评论