理解原型链

岳光发布于2019-08-19 18:25 / 598人阅读

摘要：作用原型链的存在，主要是为了实现对象的继承。理解要理解原型链，需要从几个概念入手。因此在不断的指向中，形成了原型链。原型链的内存结构为了严谨起见，区分对象和变量

JavaScript之原型链

参考：http://zhangjiahao8961.iteye.com/blog/2070650

原型链

概念

原型链是一种机制，指的是JavaScript每个对象包括原型对象都有一个内置的[[proto]]属性指向创建它的函数对象的原型对象，即prototype属性。

作用

原型链的存在，主要是为了实现对象的继承。

理解

要理解原型链，需要从几个概念入手。

1、函数对象

在JavaScript中，函数即对象。

2、原型对象

当定义一个函数对象的时候，会包含一个预定义的属性，叫prototype，这就属性称之为原型对象。

//函数对象
function F(){};
console.log(F.prototype)

//普通对象
var a = {};
console.log(a.prototype);//undefined

3、__proto__

JavaScript在创建对象的时候，都会有一个[[proto]]的内置属性，用于指向创建它的函数对象的prototype。原型对象也有[[proto]]属性。因此在不断的指向中，形成了原型链。

举个例子来说，我们将对象F的原型对象修改一下，就可以清楚看到上述的关系

//函数对象
function F(){};
F.prototype = {
    hello : function(){}
};
var f = new F();
console.log(f.__proto__)

4、new

当使用new去调用构造函数时，相当于执行了

var o = {};
o.__proto__ = F.prototype;
F.call(o);

因此，在原型链的实现上，new起到了很关键的作用。

5、constructor

原型对象prototype上都有个预定义的constructor属性，用来引用它的函数对象。这是一种循环引用。

function F(){};
F.prototype.constructor === F;

在实际运用中，经常会有下列的写法

function F(){};
F.prototype = {
    constructor : F,
    doSomething : function(){}
}

这里要加constructor是因为重写了原型对象，constructor属性就消失了，需要自己手动补上。

6、原型链的内存结构

function F(){
    this.name = "zhang";
};
var f1 = new F();
var f2 = new F();

为了严谨起见，区分对象和变量

海外云主机服务器托管原型原型链原型链原型链继承原型链图

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

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

【5】JavaScript 函数高级——原型与原型链深入理解（图解）

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

马龙驹 2019-08-23 17:17 评论0 收藏0
如何理解JavaScript的原型和原型链？

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

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

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

adie 2019-08-23 16:54 评论0 收藏0
原型链二：Function的原型链问题

摘要：每个函数都有一个属性构造函数指向实例原型如下图重点理解实例对象指向实例原型对象参考原博客的那个部分挖来下图理解之后我们来看在声明函数的时候有一种声明方法是构造函数下面参考阮一峰第三种声明函数的方式是构造函数。理解关于Function的原型链问题关于Function的原型链问题的一些个人粗略理解,欢迎指正错误的地方可以看这篇文章：https://github.com/KieSun...

dingda 2019-08-22 17:04 评论0 收藏0
理解javaScript原型、原型链

摘要：构造函数的属性指向原型对象原型对象的属性指向构造函数实例对象的指向原型对象所有引用类型默认都继承了，而这个继承也是通过原型链实现的。第一种方式是使用操作符，只要用这个操作符来测试实例与原型链中出现过的构造函数，结果就会返回。理解对象首先对象的定义是:无序属性的集合，其属性可以包含基本值、对象或者函数。严格来讲，这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名...

NSFish 2019-08-26 18:13 评论0 收藏0