面试题 - 原型及原型链

面试题 - 原型及原型链

一. [[protoType]]

1 - [[prototype]]属性

• 什么是[[Prototype]]属性

JavaScript中每一个对象都有一个内置的[[prototype]]属性，这个属性指向对其他对象的引用。大多数情况下这个对象的值都不为空。

• 原型链的尽头 - Object.prototype

当执行 [[Get]] 操作时，如果当前对象没有查找的属性，则会继续向上查找原型链，直到查找到原型链的尽头 Object.prototype，如果依旧没有则返回 undefined 。所以自定义的一些对象可以使用Object的基本功能，例如 valueOf()/toString() 等

2 - 属性屏蔽

• 什么是属性屏蔽

当想要给一个对象设置一个属性（例如：foo属性）时，如果目标对象上，也出现在原型链上，那就会放生屏蔽，目标对象的属性对屏蔽掉原型链上的属性。

• 多种属性屏蔽情况
  • 正常屏蔽：原型链和目标属性都有该属性，并且该属性在原型链上没有被设置为 wriable：false。

let protoTypeObject = {
  name:'Lily'
}
let myObject = Object.create(protoTypeObject);
myObject.name = 'July2';
console.log(protoTypeObject);  // { name: 'Lily' }
console.log(myObject); // { name: 'July2' }

• 不屏蔽：原型链有该属性属性，并且该属性在原型链上被设置为 wriable：false。

let obj2 = {name:'Tom'} ;
Object.defineProperty(obj2,'name',{
  writable:false,
})

let myObj2 = Object.create(obj2);
myObj2.name = 'Tom2';
console.log(obj2) // { name: 'Tom' }
console.log(myObj2); // {}

• 调用：原型链有该属性，并且该属性为访问属性setter，会直接调用setter且不会产生屏蔽和重写。

let obj3 = {
  set name(value){
    console.log('调用了setter函数：'+value)
  }
};
let myObj3 = Object.create(obj3);
myObj3.name = "Tom" // 调用了setter函数：Tom
console.log(obj3);  // { name: [Setter] }
console.log(myObj3); // {}

重点说明：第二种和第三种限值仅限于 = 号复制，如果使用 Object.defineProperty 则不会产生这种情况。

二. 类

1 - 类函数

• 函数的特殊特性

所有的函数默认都会有一个prototype的公有且不可枚举的属性。它指向另外一个对象。这个对象被称为函数的原型。

• 函数原型是什么？

函数的prototype指向的对象被称为函数原型。即在执行 new Foo() 时被创建并且关联到Foo的prototype上。

function Person(name,age){
  this.name = name;
  this.age = age;
}

let student1 = new Person('张三',21);
console.log(student1); // Person { name: '张三', age: 21 }
console.log(student1 instanceof Person); // true

// 执行new的过程
function _new(Parent,...rest){
  let target = Object.create(Parent.prototype); // prototype 对象被关联到 Parent对象的prototype属性上
  let result = Parent.apply(target,rest);
  if (result && (typeof result === 'object' || typeof result === 'function') ){
    return result
  }
  return target;
}
let student2 = _new(Person , '李四',18)
console.log(student2); // Person { name: '李四', age: 18 }
console.log(student2 instanceof Person); // true

console.log(Person.prototype); // Person{}

2 - 构造函数

• 构造函数的形成

当在普通的函数前面加上关键字 new 后，就会把这个函数的调用变成一个构造函数调用。即 new 会劫持普通函数并用构造对象的方式调用它。

• 构造函数/原型对象/实例三者的关系
  • 每一个构造函数都有一个原型对象，每一个原型对象都会有一个指向构造函数的指针
  • 每一个实例都有一个指向原型对象的内部指针。

三. 继承

1 - 继承的方式

• 实例和对象之间的委托关系，对象和对象之间的委托关系
  

• 继承的实现

function Foo(name){
  this.name = name
}
Foo.prototype.sayNmae = function (){
  return this.name
}

function Bar(name,label){
  Foo.call(this,name);
  this.label = label;
}

// ES5 Bar 继承 Foo
Bar.prototype = Object.create(Foo.prototype);
Bar.prototype.myLabel = function (){
  return this.label
}

var a = new Bar("张三",'吃饭')
console.log(a.sayNmae());
console.log(a.myLabel());

// eS6 之后的继承
Object.setPrototypeOf(Bar.prototype,Foo.prototype)
var b = new Bar("张三2",'吃饭2')
console.log(b.sayNmae());
console.log(b.myLabel());

2 - 查看类关系

• instanceof
  • 说明1：instanceof 只能用来判断 实例 和 构造函数之间的关系，不能判断两个对象之间是否有原型链的关联。
• isPrototypeOf
  • 说明：既可以用来判断实例和构造函数之间，也可以用来判断对象和对象之间是否存在原型链的关联
• Object.getPrototypeOf

function Foo(){
  this.name = '张三'
}
let person1 = new Foo();
let person2 = new Foo();
console.log(person1 instanceof Foo);	// true
console.log(person2 instanceof Foo); // true
console.log(Foo.prototype.isPrototypeOf(person2));// true

let Foo2 = {
  name:'张三'
}
let person3 = Object.create(Foo2)
console.log(Foo2.isPrototypeOf(person3)); // true
console.log(Object.getPrototypeOf(person3) === Foo2);// true

四. 关联对象

原型链：如果对象上没有找到我们查找的属性或方法，引擎就会在关联的原型链上去查找。同理，如果后者也没有则继续查找后者的原型链，以此类推，形成原型链。

1 - 创建关联

• 使用 Object.create() 创建具有关联关系的两个对象。不会想new关键字一样生成 prototype 和 constructor引用。

五. 原型小结