继承中遇到的问题

131 阅读1分钟
function A() {
    this.a = true;
    this.arr = ["1", "2", "3"];
}

function B() { }

B.prototype = new A();

var p1 = new B();
var p2 = new B();

console.log(p1.a, p2.a);       // true true
console.log(p1.arr, p2.arr);   // true true

// << 1 >>
p1.a = false;
p1.arr = 78;

// // << 2 >>
// p1.prototype.a = false;
// p1.prototype.arr = 78;

// // << 3 >>
// B.prototype.a = false;
// B.prototype.arr = 78;

console.log(p1.a, p2.a);       // false true                        
console.log(p1.arr, p2.arr);   // 78  [ '1', '2', '3' ]

将<<2>> 、<< 3 >>注释掉 原本以为 <<1>>的写法能修改p1.a,p1.arr,同时由于原型的动态性p2.a,p2.arr的结果也会变得跟p1.a,p1.arr一致,结果打脸

原因: p1.a是在p1实例中创建了新的属性a,p1.a是实例中的a,原型中的a被屏蔽了 p1.arr是在p1实例中创建了新的属性arr,p1.arr是实例中的arr,原型中的arr被屏蔽了

function A() {
    this.a = true;
    this.arr = ["1", "2", "3"];
}

function B() { }

B.prototype = new A();

var p1 = new B();
var p2 = new B();

console.log(p1.a, p2.a);       
console.log(p1.arr, p2.arr);   

// // << 1 >>
// p1.a = false;
// p1.arr = 78;

// << 2 >>
p1.prototype.a = false;
p1.prototype.arr = 78;

// // << 3 >>
// B.prototype.a = false;
// B.prototype.arr = 78;

console.log(p1.a, p2.a);                             
console.log(p1.arr, p2.arr);

将<<1>> <<3>>注释,启用<<2>>运行会报错TypeError: Cannot set property 'a' of undefined
原因: p1中只有[[prototype]],而[[prototype]]不是prototype

function A() {
    this.a = true;
    this.arr = ["1", "2", "3"];
}

function B() { }

B.prototype = new A();

var p1 = new B();
var p2 = new B();

console.log(p1.a, p2.a);       // true true
console.log(p1.arr, p2.arr);   // [ '1', '2', '3' ] [ '1', '2', '3' ]

// // << 1 >>
// p1.a = false;
// p1.arr = 78;

// // << 2 >>
// p1.prototype.a = false;
// p1.prototype.arr = 78;

// << 3 >>
B.prototype.a = false;
B.prototype.arr = 78;

console.log(p1.a, p2.a);     //   false false                       
console.log(p1.arr, p2.arr);  // 78 78 

function A() {
    this.a = true;
    this.arr = ["1", "2", "3"];
}

function B() { }

B.prototype = new A();

var p1 = new B();
var p2 = new B();

console.log(p1.arr, p2.arr);   // [ '1', '2', '3' ] [ '1', '2', '3' ]

p1.arr.push("4");

                     
console.log(p1.arr, p2.arr);  // [ '1', '2', '3', '4' ] [ '1', '2', '3', '4' ]