【JavaScript】原型链

一、创建对象有几种方法

// 第一种方式：字面量，默认创建对象     
var a10 = {name:'a10'};             // {name: "a10"}  对象直接量
var a11 = new Object({name:'a11'}); // {name: "a11"}  关键字new

// 第二种方式：构造函数     
var a2 = function(){this.name = 'a20'};  
var a20 = new a2();                 // a2 {name: "a20"}

// 第三种方式：Object.create()       
var a3 = {name:'a30'};
var a30 = Object.create(a3);        // {} 之后输入 a30.name 能得到 "a30"

创建对象

二、实例、构造函数、原型、原型链

原型链

function Fn() {
  this.name = 'Fn',
  this.run = function() {
    console.log('run')
  }
}
var F = new Fn();

Fn.prototype.constructor === Fn                   // true
Fn.prototype.__proto__ === Object.prototype       // true
Fn.__proto__ === Function.prototype               // ture  
Fn.prototype === F.__proto__                      // true
Fn.prototype.__proto__ === F.__proto__.__proto__  // true 

new Fn().constructor === Fn                       // true
F.constructor === Fn                              // true

2.1 实例

对象就是一个实例，就有 _proto_ 属性。
实例通过 _proto_ 原型链找到 prototype 原型对象，prototype 原型对象的属性被所有实例共享。

2.2 构造函数

创建对象的一种方式
通过 new 来创建对象实例。
任何函数都可以作为构造函数。
只要被new运算符使用过的函数就是一个构造函数。

2.3 原型

函数都有 prototype 属性，prototype 属性的值就是一个初始化的原型对象。
原型对象有个 constructor 和 _proto_ 属性，constructor 是一个构造函数。
Fn.prototype.constructor === Fn （constructor 函数指向构造函数本身。通过 constructor 把原型对象和构造函数关联。）

2.4 原型链

每一个对象都有自己的原型对象，原型对象本身也是对象，原型对象也有自己的原型对象，这样就形成了一个链式结构，叫做原型链。

三、instanceof的原理

instanceof 主要作用就是判断一个实例是否属于某种类型，实现原理就是只要右边变量的 prototype 在左边变量的原型链上即可。因此，instanceof 在查找的过程中会遍历左边变量的原型链，直到找到右边变量的 prototype，如果查找失败，则会返回 false。

四、new运算符

// 构造函数
var Fn = function(name) {
  this.name = name;
}
var obj = new Fn('obj');

创建一个空对象，空对象要关联 Fn.prototype

构造函数 Fn 被执行，执行的时候，相应的参数会被传入，同时上下文（this）会被指定为这个新实例，new Fn 等同于 new Fn() ，只能用在 Fn 不传递任何参数的情况

如果Fn构造函数返回一个对象，那么这个对象会取代整个 new 出来的结果，如果构造函数没有返回对象，则返回this那么，new 出来的结果为步骤1创建的对象

new 运算符的工作原理：

/**
 * 实现 new 关键字 
 * @param  {Function} constructor [构造函数]
 * @return {Object|Function|Regex|Date|Error}      [返回结果]
 */
function mockNew(fun) {
  // 创建空对象, 关联 object.__proto__ 到 constructor.prototype
  var obj = Object.create(fun.prototype);
  // 绑定 this：apply call  改变fun函数运行时的上下文
  var k = fun.apply(obj);
  // 返回新对象（如果构造函数有自己的return时，则返回该值）
  if(typeof k === 'object') {
    return k;
  } else {
    return obj;
  }
}
var Fn = function() {
  // this.name = 'obj', mockNew(Fn)返回的结果完全等同。
  return {
    name: 'obj';
  }
}
var foo = mockNew(Fn);

foo instanceof Object    // true
foo instanceof Fn        // true

赏

支付宝打赏

微信打赏

欣赏此文，打赏一下