一、何为原型链

  原型是一个对象,当我调用一个对象的方法时,如果该方法没有在对象里面,就会从对象的原型去寻找。JavaScript就是通过层层的原型,形成原型链。

二、谁拥有原型

  任何对象都可以有原型,当我们创建对象的时候,会自动为对象添加一个属性,这个属性就是原型,我们无法访问到他,但在firefox和chrome中可以通过一个非标准的属性__proto__(双下划线)来访问到原型(或通过Object.getPrototypeOf来访问)。

三、理解原型链

  我们先从以下代码入手

  var foo = {};
  console.log(foo.toString()); // [object Object]  
  console.log(foo.__proto__); // object { ... } 这里指向Object.prototype

  foo里面明明没有toString方法,但我却能调用,这就是原型链的作用。当我调用foo.toString时,由于在里面找不到toString方法,那么我从__proto__属性里面去找,找到后并调用。上面的代码中我们就是从Object.prototype中找到了toString方法。你可能会很困惑,prototype是什么?我们不要被prototype所迷惑,他只是一个存放属性的容器而已,你可以如下这样做来实现继承(但尽量不要这么做)

function Bar() {}
Bar.test = {
say: function () {
console.log('say test');
}
} var foo = new Bar();
foo.say(); // 报错 // 改变继承的对象 foo.__proto__ = Bar.test;
foo.say() // say test

  在上面的代码中我们通过new的形式来创建一个对象,在new的过程中对象会将__proto__指向函数的prototype,由于prototype中是没有say函数的,所以调用会报错,但是之后我们强行改变了继承的对象,将foo的继承对象改为Bar.test,所以我们就能调用say函数了。


  我想你已经明白个大概了,prototype事实上并没有什么特殊的,硬要说有什么特殊的话,他只是被JavaScript默认为原型属性的存放点而已,他本质上只是个对象,原型链的重点就在于__proto__,你可以试着把__proto__当作桥梁,当我在对象内部找不到属性时,我就会通过这座桥梁到对面的对象里去寻找属性,直到找到为止或者对象里没有桥梁时才停下来。JavaScript就是通过这样的方式来形成原型链,实现继承的关系。

  最后说一下,__proto__只是方便我们查看对象的原型而已,大家不要通过修改__proto__来实现继承的关系,而是要用如构造函数之类的方式来实现继承,这个我会放到以后的文章去说。

(ps:可能有动手能力强的同学会自己去测试,发现__proto__里面也有__proto__,一直循环下去,无穷无尽,但事实上你去获取的时候你会发现Object.__proto__.__proto__.__proto__的值是null,也就是没有原型。)

  

深入理解JavaScript中的继承:原型链篇的更多相关文章

  1. 深入理解JavaScript中的继承

    1前言 继承是JavaScript中的重要概念,可以说要学好JavaScript,必须搞清楚JavaScript中的继承.我最开始是通过看视频听培训班的老师讲解的JavaScript中的继承,当时看的 ...

  2. 深入理解Javascript中构造函数和原型对象的区别

    在 Javascript中prototype属性的详解 这篇文章中,详细介绍了构造函数的缺点以及原型(prototype),原型链(prototype chain),构造函数(constructor) ...

  3. 深入理解Javascript中构造函数和原型对象的区别(转存)

    Object是构造函数,而Object.prototype是构造函数的原型对象.构造函数自身的属性和方法无法被共享,而原型对象的属性和方法可以被所有实例对象所共享. 首先,我们知道,构造函数是生成对象 ...

  4. JavaScript中的继承(原型链)

    一.原型链 ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 实例1: function SupType() { this.pro ...

  5. 深入理解javascript中实现面向对象编程方法

    介绍Javascript中面向对象编程思想之前,需要对以下几个概念有了解: 1. 浅拷贝和深拷贝:程序在运行过程中使用的变量有在栈上的变量和在堆上的变量,在对象或者变量的赋值操作过程中,大多数情况先是 ...

  6. 理解JavaScript中的原型继承(2)

    两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...

  7. JavaScript 中实现继承的方式(列举3种在前一章,我们曾经讲解过创建类的最好方式是用构造函数定义属性,用原型定义方法。)

    第一种:对象冒充 function ClassA(sColor) { this.color = sColor; this.sayColor = function () { alert(this.col ...

  8. 深入理解JavaScript中创建对象模式的演变(原型)

    深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...

  9. 深入理解javascript中执行环境(作用域)与作用域链

    深入理解javascript中执行环境(作用域)与作用域链 相信很多初学者对与javascript中的执行环境与作用域链不能很好的理解,这里,我会按照自己的理解同大家一起分享. 一般情况下,我们把执行 ...

随机推荐

  1. 动易CMS-搜索结果页显示自定义字段

    最终的页面: 步骤: 1.搜索标签代码 <input id="keyword" type="text" class="text" on ...

  2. 【JAVA零基础入门系列】Day2 Java集成开发环境IDEA

    开发环境搭建好之后,还需要一个集成开发环境也就是IDE来进行编程.这里推荐的IDE是IDEA,那个老掉牙的Eclipse还是先放一边吧,(手动滑稽). IDEA的下载地址:http://www.jet ...

  3. Excel更改单元格格式后无效

    问题描述: 比如修改了数据的自定义显示格式(日期显示 yyyy"年"m"月",手机号分段000-0000-0000),应用后发现只有部分生效,或者都不生效,再检 ...

  4. vue学习之父组件与子组件之间的交互

    1.父组件数据传给子组件 父组件中的msgfather定义数据 在之组件中通过设置props来取得希望从父组件中获得的值 通过设置这两个属性就可以从父组件传数据到子组件 2.子组件传数据给父组件(这里 ...

  5. Linux查找和筛选工具

    本文为原创文章,转载请标明出处 目录 文件名通配符 单字符匹配元字符 ? 多字符匹配元字符 * 字符范围匹配符 [] 排除范围匹配符 [!] 命令中的正则表达式 单字符匹配符 . 单字符或字符串重复匹 ...

  6. 访问 IIS 元数据库失败

    问题: 访问 IIS 元数据库失败.说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常详细信息: System.Web ...

  7. Maven打包Jar

    现状 该项目使用了Maven,并且引入了Spring,包含代码.配置文件.Jar包,使用的是IDEA来作为开发工具,项目的产出物是要打包成一个可运行的Jar包.通过IDEA的打包工具也可以打包成功,只 ...

  8. 用git从github网站上下载代码的方式

    原本单击如下下载按钮即可 但有时候github异常,该按钮无效,可以使用如下方法: 1.复制url,如https://github.com/ulli-kroll/mt7610u 2.进入要存放该代码的 ...

  9. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  10. 数组去重方法(ES6)

    let arrayBefore = [1,3,3,2,1,5,2,1]; //去重之前的数组 Array.prototype.dedupe = function (){ //去重函数 返回去重后的数组 ...