构造函数创建对象

我们先使用构造函数创建一个对象:

function Person(){}
var person = new Person();
person.name = 'Kevin';
console.log(person.name) //Kevin

在这个例子中,Person就是一个构造函数,我们使用new创建了一个实例对象person。

很简单吧,接下来进入正题:

prototype

每个函数都有一个prototype属性,就是我们经常在各种例子中看到的那个prototype,比如:

function Person(){}

//注意! prototype是函数才会有的属性

Person.prototype.name = 'Kevin';
var person1 = new Person();
var perosn2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

那这个函数的prototype属性到底指向的是什么呢?是这个函数的原型吗?

其实,函数的prototype属性指向了一个对象,这个对象正是调用该构造函数而创建的实例的原型,也就是这个例子中的person1和person2的原型。

那什么是原型呢?你可以这样理解:每一个JavaScript对象(NULL除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型“继承”属性。

让我们用一张图表示构造函数和实例原型之间的关系:

在这张图中我们用 Object.prototype表示实例原型。

那么我们该怎么表示实例与实例原型,也就是person和Person.prototype之间的关系呢?这时我们就要讲到第二个属性:

proto

这是每一个JavaScript对象(出了NULL)都具有的一个属性,叫 proto,这个属性会指向该对象的原型。

为了证明这一点,我们可以再火狐或者谷歌浏览器中输入:

function Person(){}
var person = new Person();
console.log(Person.prototype === person.__proto__) // true

所以再更新一下关系图:

综上我们已经得出:

function Person(){}
var person = new Person(); console.log(person.__proto__ === Person.prototype) //true
console.log(Person.prototype.constructor == Person) //true //顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) //true

了解了构造函数、实例原型、和实例之间的关系,接下来我们讲讲实例和原型的关系:

实例与原型

当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。

举个例子:

function Person(){}
Person.prototype.name = 'Kevin';
var person = new Person(); person.name = 'Daisy';
console.log(person.name) // Daisy delete person.name;
console.log(person.name) // Kevin

在这个例子中,我们给实例对象person添加了name属性,当我们打印person.name的时候,结果自然为 Daisy。

当我们删除了person的name属性时,读取person.name,从person对象中找不到name属性就会从person的原型也就是 person.proto ,也就是 Person.prototype中查找,幸运的是我们找到了name属性,结果为 Kevin.

但万一还没有找到呢?原型的原型又是什么?

原型的原型

在前面,我们已经讲了原型也是一个对象,既然是对象,我们就可以用最原始的方法创建它,那就是:

var obj = new Object();
obj.name = 'Kevin';
console.log(obj.name) // Kevin

所以原型对象是通过 Object构造函数生成的,结合之前所讲,实例的 proto 指向构造函数的 prototype,所以我们再更新下关系图:

原型链

那 Object.prototype 的原型呢?

** null **, 不信我们可以打印:

console.log(Object.prototype.proto === null) //true

所以查找属性的时候,查到 Object.prototype就可以停止查找了。

所以最后一张关系图就是

顺便还要说一下,图中由相关的原型组成的链状结构就是原型链,也就是蓝色的这条线。

补充

最后,补充三点大家可能不会注意的地方:

constructor

首先是 constructor 属性,我们看个例子:

function Person(){}

var person = new Person();
console.log(person.constructor == Person) //true

当获取person.constructor 时,其实person中并没有 constructor 属性,当不能读取到 constructor 属性时,会从 person 的原型也就是 Person.prototype 中读取,正好原型中有该属性,

所以:

person.constructor === Person.prototype.constructor

proto

其次是 proto ,绝大部分浏览器都支持这个非标准的方法访问原型,然而它并不存在于Person.prototype中,实际上,它来自于 Object.prototype,与其说是一个属性,不如说它是一个 getter/setter,当使用 obj.__proto__时,可以理解成返回了 Object.getPrototypeOf(obj).

真的是继承吗?

最后是关于继承,前面我们讲到 “ 每一个对象都回从原型 继承属性 ”,实际上,继承是一个十分具有迷惑性的说法,引用 《你不知道的JavaScript》中的话,就是:

继承意味着复杂操作,然而JavaScript默认并不会复制对象的属性,相反,JavaScript 只是在两个对象之间创建一个关联,这样,一个对象就可以通过委托访问另一个对象的属性和函数,所以与其叫继承,委托的说法反而更准确些。

文章来源:()[https://github.com/mqyqingfeng/Blog/issues/2]

JavaScript深入之从原型到原型链的更多相关文章

  1. 【javascript基础】4、原型与原型链

    前言 荒废了好几天,在宿舍闷了几天了,一直想着回家放松,什么也没搞,论文就让老师催吧.不过,闲的没事干的感觉真是不好,还是看看书,写写博客吧,今天和大家说说函数的原型. 原型是什么 第一次看到这个的时 ...

  2. 【JavaScript】深入理解JavaScript之强大的原型和原型链

    由于JavaScript是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. AD: hasOwnProperty函数: hasOw ...

  3. Javascript 原型和原型链

    先来了解一下Javascript中的原型:”原型也是一个对象,原型可以用来实现继承...“ 对于 原型,构造函数,以及实例之间的关系:“每个(构造)函数都有一个原型属性,原型对象都包含一个指向构造函数 ...

  4. javascript 原型 和 原型链

    最近几天,好些新同事来问原型,原型链啥的.本身作为菜鸟的我好像也没有好好整理过这个,这里写写自己的理解. 原型 大家都知道,JavaScript 不包含传统的类继承模型,而是使用 prototype ...

  5. JavaScript深入之从原型到原型链(本文转载)

    JavaScript深入之从原型到原型链(本文转载) https://github.com/mqyqingfeng/Blog.原文地址 构造函数创建对象 我们先使用构造函数创建一个对象: functi ...

  6. javascript 之原型、原型链-14

    原型 原型是一个对象,每个函数对象(在javascript 之对象中说过函数也是对象 )都有一个属性(prototype)指向这个对象--原型对象,这个对象的作用是让所有对象实例共享原型对象中的属性. ...

  7. JavaScript原型与原型链

    一.数据类型 JavaScript的数据类型可以分为基本数据类型和引用数据类型. 基本数据类型(6种) String Number Boolean null undefined Symbol(ES6) ...

  8. JavaScript prototype原型和原型链详解

    用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...

  9. javascript原型与原型链,prototype、__proto__、constructor

    javascript通过构造函数(constructor)和原型链来(prototype chain)实现其他面向对象语言的类概念.ES6语法中引入了“类”(class)的概念,但只是一个语法糖,只是 ...

随机推荐

  1. day 7-18 mysql case when语句

    概述: sql语句中的case语句与高级语言中的switch语句,是标准sql的语法,适用于一个条件判断有多种值的情况下分别执行不同的操作. 首先,让我们看一下CASE的语法.在一般的SELECT中, ...

  2. delphi中adoquery控件中某个字段Onvalidate事件的用法?

    procedure TForm2.ADOQuery1TestFieldValidate(Sender: TField);begin// Sender就是当前字段,可以在这里对Sender字段进行各种操 ...

  3. case when 空值判断

    在对数据库进行查询时,遇到了一个问题:查询结果中的某一列需要判断另一列是否为空的来确定值,自然就想到了case when,于是写出了下面的SQL(其他部分省略): (case date when nu ...

  4. 如何强制关闭LODOP或c-lodop已经弹出的预览窗口

    该文介绍一下LODOP和C-LODOP关于窗口的弹出,和如何强制关闭已经打开的预览窗口. 同一个页面,只能弹出一个窗口,lodop是禁止点击动作,而c-lodop会提示已有窗口开的,请关闭之类的默认提 ...

  5. Microsoft Bot Framework with LUIS

    今年微软的编程之美的主题是“对话即平台”,“人工智能”,要求参赛选手用到Bot Framework与Cognitive Services. 大多数人应该对这两个技术都不怎么熟悉吧,我就在这里写写自己所 ...

  6. JSON in SQL Server 2016

    JSON functions in SQL Server enable you to analyze and query JSON data, transform JSON to relational ...

  7. codeforces401C

    Team CodeForces - 401C Now it's time of Olympiads. Vanya and Egor decided to make his own team to ta ...

  8. gym-10135I

    题意:和H差不多,这个是找字符串中最长的镜像字串: 思路:一样的思路,标记下: #include<iostream> #include<algorithm> #include& ...

  9. Java虚拟机加载类的过程

    Java虚拟机的类加载,从class文件到内存中的类,按先后顺序需要经过加载/链接/初始化三大步骤. Java语言的类型分为两大类:基本类型(primitive types)和引用类型(referen ...

  10. Codeforces Round #539 Div. 1

    A:即求长度为偶数的异或和为0的区间个数,对前缀异或和用桶记录即可. #include<iostream> #include<cstdio> #include<cmath ...