JavaScript 原型 prototype 使用经验

Posted 2020-12-26 rencoo

function Foo(){}
Foo.prototype.sayName = function(){
    return ‘初始原型‘;
}

var foo1 = new Foo();
foo1.sayName() //‘初始原型‘

// new 方式重写原型；切断了新实例 与 原有原型之间的连接
function Bar(){}
Foo.prototype = new Bar(); //
var foo2 = new Foo();
foo2.sayName(); // error 报错；找不到这个方法

Bar.prototype.sayName = function(){
    return ‘第一次重写的原型‘;
}

var foo3 = new Foo();
foo3.sayName() // ‘第一次重写的原型‘

// 覆盖重写原型后定义的方法
Foo.prototype.sayName = function(){
    return ‘覆盖了新原型的方法‘
}

var foo4 = new Foo();
foo4.sayName() // ‘覆盖了新原型的方法‘

// 覆盖原型的方法，并不影响其他实例调用这个方法；
// 其他实例还会继续调用(覆盖前)原来的那个方法
var bar = new Bar();
bar.sayName() // ‘第一次重写的原型‘

// 对象字面量方式 重写原型对象； 切断了新实例与原有原型的连接
Foo.prototype = {
    getHeight: function(){
        return ‘高度是2m‘
    },
    getWeight: function(){
        return ‘重量是1kg‘
    }
}
// 相当于 Foo.property = new Object(); 然后再定义方法...

var foo5 = new Foo();
foo5.sayName() // error报错；找不到这个方法
// 但原有的实例 还是能连接到 原有的原型
foo4.sayName() //‘覆盖了新原型的方法‘

Foo.prototype.__proto__ == Object.prototype // true

// 另外，在构造器函数里定义的属性，比较好理解，变化没这么多

prototype 的使用经验，主要是判断 实例是在重写原型之前定义，还是重写原型之后定义的；

• 1. 重写原型会切断  原有实例 与 现有原型 的连接
• 2. 重写原型会切断 现有实例 与 原有原型 的连接

记住一句话

• 实例中的指针仅指向原型，而不指向构造函数