乐趣区

关于javascript:js原型和原型链疑问

jiezi

在原型上增加属性或者⽅法有什么益处

如果不通过原型的⽅式，每⽣成⼀个新对象，都会在内存中新开拓⼀块存储空间，当对象变多之后，性能会变得很差。
常见写法

Fun.prototype.xx = function () {};
Fun.prototype.xx = function () {};
Fun.prototype.xx = function () {};

这种⽅式向原型对象增加属性或者⽅法的话，⼜显得⾮常麻烦。转换形式

Fun.prototype = {start: function () {console.log("start");
 },
 end: function () {console.log("end");
 },
};

如何找到 Fun 的原型对象

function Fun(attr) {this.attr = attr;}
Player.prototype.start = function () {console.log(attr + "start");
};
const f1 = new Fun("1");
const f2 = new Fun("2");
console.log(f1.__proto__); // Fun {}
console.log(Object.getPrototypeOf(f1)); // Fun {}，能够通过
// Object.getPrototypeOf 来获取__proto__
console.log(Fun.prototype); // Fun {}
console.log(Fun.__proto__); // [Function]

new 关键字到底做了什么

1 ⼀个继承⾃ Fun.prototype 的新对象 f1 被创立
2 f1.proto 指向 Fun.prototype，即 f1.proto = Fun.prototype
3 将 this 指向新创建的对象 f1
4 返回新对象; 如果构造函数没有显式返回值，则返回 this; 如果构造函数有显式返回值，是根本类型，⽐如 number,string,boolean, 那么还是返回; 如果构造函数有显式返回值，是对象类型，⽐如{a: 1}, 则返回这个对象{a: 1}. 通过打印实例能够验证

依据 new 关键字所做内容，模仿 new 的实现

function Fun(name) {this.name = name;}

function objectFactory() {let o = new Object();
  let FunctionConstructor = [].shift.call(arguments);
  o.__proto__ = FunctionConstructor.prototype;

  let resultObj = FunctionConstructor.apply(o, arguments);
  return typeof resultObj === "object" ? resultObj : o;
}

const f1 = objectFactory(Fun, "a");
console.log(f1);

原型链是什么

当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，⼀直找到最顶层为⽌。
简略测试用例，如果 f1 实例在 Fun 的原型中找不到，会始终往上找到 Object 的原型属性.

Object.prototype.x = 'Object_x'

function Fun(){}
Fun.prototype.x = 'Fun_x'
const f1 = new Fun()
console.log(f1.x)

这样⼀条通过 proto 和 prototype 去连贯的对象的链条，就是原型链

业界争议鸡生蛋问题

Object instanceof Function; // true
Function instanceof Object; // true

Object instanceof Object; // true
Function instanceof Function; // true

由第一句和第二句推导出

Object.__proto__ === Function.prototype
Function.__proto__.__proto__ === Object.prototype

推导出

Function.__proto__ === Function.prototype

由此产生一个业界争执，Function 对象是不是由 Function 构造函数创立的一个实例
解释 1、Function 对象是由 Function 构造函数创立：依照 JavaScript 中“实例”的定义，a 是 b 的实例即 a instanceof b 为 true，默认判断条件就是 b.prototype 在 a 的原型链上。而 Function instanceof Function 为 true，实质上即 Object.getPrototypeOf(Function) === Function.prototype，正合乎此定义。

解释 2、Function 对象不是由 Function 构造函数创立：Function 是 built-in 的对象，也就是并不存在“Function 对象由 Function 构造函数创立”这样显然会造成鸡生蛋蛋生鸡的问题。实际上，当你间接写一个函数时（如 function f() {} 或 x => x），也不存在调用 Function 结构器，只有在显式调用 Function 结构器时（如 new Function(‘x’, ‘return x’)）才有。

退出移动版