深入理解JavaScript中的继承:原型链篇
一、何为原型链
原型是一个对象,当我调用一个对象的方法时,如果该方法没有在对象里面,就会从对象的原型去寻找。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中的继承:原型链篇的更多相关文章
- 深入理解JavaScript中的继承
1前言 继承是JavaScript中的重要概念,可以说要学好JavaScript,必须搞清楚JavaScript中的继承.我最开始是通过看视频听培训班的老师讲解的JavaScript中的继承,当时看的 ...
- 深入理解Javascript中构造函数和原型对象的区别
在 Javascript中prototype属性的详解 这篇文章中,详细介绍了构造函数的缺点以及原型(prototype),原型链(prototype chain),构造函数(constructor) ...
- 深入理解Javascript中构造函数和原型对象的区别(转存)
Object是构造函数,而Object.prototype是构造函数的原型对象.构造函数自身的属性和方法无法被共享,而原型对象的属性和方法可以被所有实例对象所共享. 首先,我们知道,构造函数是生成对象 ...
- JavaScript中的继承(原型链)
一.原型链 ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 实例1: function SupType() { this.pro ...
- 深入理解javascript中实现面向对象编程方法
介绍Javascript中面向对象编程思想之前,需要对以下几个概念有了解: 1. 浅拷贝和深拷贝:程序在运行过程中使用的变量有在栈上的变量和在堆上的变量,在对象或者变量的赋值操作过程中,大多数情况先是 ...
- 理解JavaScript中的原型继承(2)
两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...
- JavaScript 中实现继承的方式(列举3种在前一章,我们曾经讲解过创建类的最好方式是用构造函数定义属性,用原型定义方法。)
第一种:对象冒充 function ClassA(sColor) { this.color = sColor; this.sayColor = function () { alert(this.col ...
- 深入理解JavaScript中创建对象模式的演变(原型)
深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...
- 深入理解javascript中执行环境(作用域)与作用域链
深入理解javascript中执行环境(作用域)与作用域链 相信很多初学者对与javascript中的执行环境与作用域链不能很好的理解,这里,我会按照自己的理解同大家一起分享. 一般情况下,我们把执行 ...
随机推荐
- asp.net core合并压缩资源文件引发的学习之旅
0. 在asp.net core中使用BuildBundlerMinifier合并压缩资源文件 在asp.net mvc中可以使用Bundle来压缩合并css,js 不知道的见:http://www. ...
- JS -- The Scope Chain 作用域链
The Scope Chain JavaScript is a lexically scoped language: the scope of a variable can be thought of ...
- You Are the One DP
You Are the One Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Sub ...
- bootstrap 的可编辑下拉框 jquery.editable-select
搜了半天发现在某处下载jquery.editable-select需要积分,于是整理出来方便 其他人. 先上下载链接:http://pan.baidu.com/s/1kUXvwlL pass ...
- jQuery扩展easyui.datagrid,添加数据loading遮罩效果代码
//jquery.datagrid 扩展加载数据Loading效果 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: fu ...
- 【网络爬虫入门02】HTTP客户端库Requests的基本原理与基础应用
[网络爬虫入门02]HTTP客户端库Requests的基本原理与基础应用 广东职业技术学院 欧浩源 1.引言 实现网络爬虫的第一步就是要建立网络连接并向服务器或网页等网络资源发起请求.urllib是 ...
- 正则表达式与grep和sed
正则表达式与grep和sed 目录 1.正则表达式 2.grep 3.sed grep和sed需要正则表达式,我们需要注意的正则表达式与通配符用法的区分. 1.正则表达式 REGEXP,正则表达式:由 ...
- 51nod 1510 最小化序列 | DP 贪心
题目描述 现在有一个长度为n的数组A,另外还有一个整数k.数组下标从1开始. 现在你需要把数组的顺序重新排列一下使得下面这个的式子的值尽可能小. ∑|A[i]−A[i+k]| 特别的,你也可以不对数组 ...
- python模拟登陆 pixiv
##---author:wuhao##在QQ群看到有群友在模拟登陆 pivix.cn 这个网站,闲来无事,我也写了一个测试一下,起初我把它想的复杂了,认为我需要获取服务器返回过来的Set-Cookie ...
- plsql经验之谈
工具你用熟悉了,可以解决实际生活得问题,且是快速的.比如我们要需要表的字段,和注释的时候,直接右击,详情,可以复制. 我们讲个熟悉的场景或者案例,比如,我们需要把已经建立的源表,需要一定的加工和处理, ...