原型链

王小匠

一、创建对象有几种方法

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

    // 第二种方式:构造函数     
    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"

案例

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

原型链

2.1 实例

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

2.2 构造函数

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

2.3 原型

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

2.4 原型链

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

三、instanceof的原理

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

四、new运算符

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

图片描述

new 运算符的工作原理:

var newTest = function(fn) {
    var initObj = Object.create(fn.prototype);
    var obj = fn.call(initObj);
    if(typeof obj === 'object') {
      return obj;
    } else {
      return initObj;
    }
}
var Fn = function() {
  // this.name = 'obj', 最后newTest(Fn)返回的结果完全等同。
  return {
    name: 'obj';
  }
}
newTest(Fn)

原文地址:https://www.artroy.com.cn/art...
更多文章分享:https://www.artroy.com.cn/

阅读 1.1k

不断成长的码农
相互交流交流
214 声望
7 粉丝
0 条评论
你知道吗?

214 声望
7 粉丝
文章目录
宣传栏