原型链

Riddler 发布于2019-08-26 10:35 / 2160人阅读

摘要：一创建对象有几种方法第一种方式字面量，默认创建对象第二种方式构造函数第三种方式之后输入能得到二实例构造函数原型原型链实例对象就是一个实例，就有属性。通过把原型对象和构造函数关联。四运算符构造函数运算符的工作原理最后返回的结果完全等同。

一、创建对象有几种方法

    // 第一种方式：字面量，默认创建对象     
    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 === Fn （constructor 函数指向构造函数本身。通过 constructor 把原型对象和构造函数关联。）

2.4 原型链

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

三、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/

海外云主机私有云原型原型链原型链原型链继承原型链图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106412.html

《javascript高级程序设计》笔记：原型图解

摘要：不理解没关系，下面会结合图例分析上一篇高级程序设计笔记创建对象下一篇高级程序设计笔记继承参考之原型链的解读三张图搞懂的原型对象与原型链继承与原型链文章直接从原型图解开始的，如果对一些概念不太清除，可以结合后面几节查看 1. 图解原型链 1.1 铁三角关系（重点） function Person() {}; var p = new Person(); showImg(https://s...

vspiders 2019-08-21 17:29 评论0 收藏0
如何理解JavaScript的原型和原型链？

摘要：之前有朋友问怎么去理解原型和原型链的问题。理解原型链的小技巧将箭头视作泛化子类到父类关系那么图中所有的虚线将构成一个继承层级，而实线表示属性引用。原型链是实现继承的重要方式，原型链的形成是真正是靠而非。之前有朋友问怎么去理解原型和原型链的问题。这个问题，在面试中，很多同学经常都会遇到。这里给大家讲讲，方便大家记忆。 JavaScript的特点JavaScript是一门直译式脚本...

xuexiangjys 2019-08-02 16:12 评论0 收藏0
如何理解JavaScript的原型和原型链？

摘要：之前有朋友问怎么去理解原型和原型链的问题。理解原型链的小技巧将箭头视作泛化子类到父类关系那么图中所有的虚线将构成一个继承层级，而实线表示属性引用。原型链是实现继承的重要方式，原型链的形成是真正是靠而非。之前有朋友问怎么去理解原型和原型链的问题。这个问题，在面试中，很多同学经常都会遇到。这里给大家讲讲，方便大家记忆。 JavaScript的特点JavaScript是一门直译式脚本...

adie 2019-08-23 16:54 评论0 收藏0
【5】JavaScript 函数高级——原型与原型链深入理解（图解）

摘要：探索是如何判断的表达式如果函数的显式原型对象在对象的隐式原型链上，返回，否则返回是通过自己产生的实例案例案例重要注意的显示原型和隐式原型是一样的。面试题测试题测试题报错对照下图理解原型与原型链深入理解（图解）原型（prototype）函数的 prototype 属性（图）每个函数都有一个prototype属性，它默认指向一个Object空对象（即称为：原型对象）原型对象中有...

马龙驹 2019-08-23 17:17 评论0 收藏0
JS基础-原型、原型链真的不能一知半解

摘要：原型链和对象的原型是对象实例和它的构造函数之间建立的链接，它的值是构造函数的。对象的原型根据上文提到的构造调用函数的时候会创建一个新对象，自动将的原型指向构造函数的对象。 showImg(https://segmentfault.com/img/remote/1460000020185197); JS的原型、原型链一直是比较难理解的内容，不少初学者甚至有一定经验的老鸟都不一定能完全说清...

changfeng1050 2019-08-26 11:00 评论0 收藏0
JavaScript面向对象---原型链继承

摘要：因为这造成了继承链的紊乱，因为的实例是由构造函数创建的，现在其属性却指向了为了避免这一现象，就必须在替换对象之后，为新的对象加上属性，使其指向原来的构造函数。这个函数接收两个参数子类型构造函数和超类型构造函数。最近一直在研究js面向对象，原型链继承是一个难点，下面是我对继承的理解以下文章借鉴自CSDN季诗筱的博客原型链继承的基本概念： ES中描述了原型链的概念，并将原型链作为实现...

vspiders 2019-08-20 13:33 评论0 收藏0