new方法返回的是构造函数的prototype也就是一个对象

发布时间 2023-11-11 15:53:45作者: 龙陌

请问以下JS代码的输出是什么?

let A = function() {}

A.prototype.a = 1;

let B = new A();

A.prototype = {
  b: 2,
  c: 3
}

let C = new A();

A.prototype.d = 4;

console.log(B.a);
console.log(B.b);
console.log(C.c);
console.log(C.d);

1、undefined、3、4

首先需要明确new方法返回的是构造函数的prototype也就是一个对象,其中直接给对象上不存在的a变量赋值相当于往这个对象添加了一个a变量,因此B可以访问到变量a,
但是后续是直接赋值了一个对象,那么原对象就无法感知到了,所以B访问不到新对象的变量b,也因此产生了新旧两个prototype的引用。
C的话拿到的是新对象以及往新对象里面新增的d变量。

let A = function() {}
A.prototype.a = 1; 
//此时 A.prototype = { a: 1 }


let B = new A(); //此时 B = {}
//在创建B时,已将B._proto_ = A.prototype = { a: 1 }
//即使后面A.prototype重新赋值,将A.prototype开辟了新的空间指向别的对象
//B._proto_并没有改,还是指向{a:1}这个对象


A.prototype = { //此时 A.prototype = { b: 2, c: 3 }
  b: 2,
  c: 3
}
let C = new A(); //C = {}
A.prototype.d = 4;//此时A.prototype = { b: 2, c: 3, d: 4 }

console.log(B.a); //1
console.log(B.b); //undefined
console.log(C.c); //3
console.log(C.d); //4

//C.d
//着重区分: A.prototype.d = 4 和 A.prototype 重新赋值 不是一个概念 
//A.prototype重新赋值时,A.prototype已经指向另一个对象了   
//A.prototype.d = 4时,访问的还是同一个A.prototype 对象 

如果 let B = new A(); 之后
加一个 A.prototype.b = 999;
那么 console.log(B.b); B.b就是999

在创建B时,已将B.proto = A.prototype; 后面A.prototype重新赋值,只是将A.prototype开辟了新的空间,B._proto_并没有改,还是{a:1};

1.A是个构造函数,B是构造函数的实例对象 => B.proto === A.prototype, A.prototype.a = 1 => B.a === 1

2.A.prototype = { b : 2 , c : 3 } , A的原型对象重新赋值,但是不会影响之前已经new 出来的B实例, B实例的原型(B.proto)跟这个A函数的原型对象没任何关系,但是这个A函数新的原型对象是后续A实例对象的原型(x.proto),即后续的实例可以访问该新原型对象中的属性 => B.b === undefined // C.c === 3

此题需要明确2点
1.new 构造函数内部发生了什么
new A 首先this= new Object obj.__proto__指向A.prototype 执行函数内部代码绑定this相关属性
如果 显示return 对象返回对象
如果显示return undefine 都默认返回this

2.堆内存地址指向 可以看到创建B时 上述new后原型指向一个含有a为1的对象
而后A.prototype指向另一块地址,
也就是b.__proto__指向与A.prototype指向脱钩的ap变化指向只表明ap不指向那个有a=1的内存区域 所以b原型上只有a