new与构造函数

Posted 2021-03-26 bluecc

function Cat(name,age){
    this.name = name
    this.age= age
}
//机制1：每一个函数对象都有一个prototype对象
console.log(Cat.prototype)          //node输出：     {}
Cat.prototype.get_name = function(){
    return this.name
}

//机制2：new关键字+构造函数 
    //step1:创建了一个新的对象{},该对象默认拥有__propto__对象
    //step2:构造函数的this指向新的对象{}  this--->{}
    //step3:构造函数的prototype对象复制给新的对象{}的__propto__
    //step4:返回新的对象
    //这个新的对象成为该构造函数的实例
let cat1 = new Cat(‘baizhu‘,1)
console.log(cat1)
const cat2 = new Cat(‘heizhu‘,2)
console.log(cat2)
console.log(cat2.__proto__)

//机制3：搜索机制（实例的属性方法搜索优先级）
     //在调用实例的属性方法时，优先搜索实例自己的属性和方法，如果没有再去__proto__里找
    let cat3 = new Cat(‘dawang‘,3)
    cat3.name = 4
    cat3.get_name = function(){
        return ‘我自己的方法：‘+this.name
    }
    console.log(cat3.name)          //node输出：4
    console.log(cat3.get_name())    //node输出：我自己的方法：4


//进阶:如何手写一个函数，让它具备new+构造函数的功能（举个例子，如何创建一个new_cat函数,让它具备new Cat()功能?)
    function new_cat(name,age){
        //step1:创建一个新的对象{},该对象默认拥有__propto__对象
        let newObj = {}
        newObj.__propto__ = {}
        //step2:构造函数的this指向新的对象{}  this--->{}
        Cat.call(newObj,name,age)
        //step3:构造函数的prototype对象浅复制给新的对象{}的__propto__
        for(let key in Cat.prototype){
            newObj.__propto__[key] = Cat.prototype[key]
        }
         //为什么上面那一步不是newObj.__propto_ = Cat.prototype ?因为这里是浅复制而不是直接赋值
        return newObj
    }
    console.log(new_cat(‘shouxie‘,5)) 
    /*
        node输出：
        {     __propto__: Cat { get_name: [Function] },
            name: ‘shouxie‘,
            age: 5
        }
    */
   
   
   //如果重新定义实例的__proto__里的方法会发生什么？
    new Cat(‘baizhu‘,1).__proto__.get_name = function(){
        return ‘手动改变了_propto_:‘+this.name
    }
    console.log(new Cat(‘baizhu‘,1).get_name()) 
    /*
        node输出：手动改变了_propto_:baizhu
    */