javascript 之原型、原型链-14
原型
原型是一个对象,每个函数对象(在javascript 之对象中说过函数也是对象 )都有一个属性(prototype)指向这个对象--原型对象,这个对象的作用是让所有对象实例共享原型对象中的属性、方法。即我们可以把公共的属性、方法写在这个原型中,所以说js中的继承是基于原型实现的;
构造函数、原型、实例
每个构造函数都有一个原型对象,原型对象包含一个指针指向构造函数,而实例包含一个指向原型对象的内部指针;
function Person(name,age){
this.name=name;
this.age=age;
}
console.dir(Person);
如图:
Person 有个属性prototype 指向原型对象
原型对象通过constructor 指向函数对象
- prototype 函数才具有的属性,指向构造函数的原型对象;
- JavaScript中的对象,都有一个内置属性 [[Prototype]] (在ES5之前没有标准的方法访问这个内置属性,但是大多数浏览器都支持通过__proto__来访问。ES5中有了对于这个内置属性标准的Get方法Object.getPrototypeOf()) _proto_ 指向创建它的函数对象的原型对象;
Object.getPrototypeOf() 可以查看MDN的介绍:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/GetPrototypeOf
原型链
概念
原型链是一种机制,指的是JavaScript每一个对象、包括原型对象都有一个内部的[[proto]]属性,它指向创建它的函数对象的原型对象。这个属性是编程不可见的(虽然ES6标准中开放了这个属性,然而浏览器对这个属性的可见性的支持不同)。
当一个对象需要引用一个属性时,JavaScript引擎首先会从这个对象自身的属性表中寻找这个属性标识,如果找到则进行相应读写操作,如果没有在自身的属性表中找到,则在_proto_属性引用的对象(原型对象)的属性表中查找,如此往复,直到找到这个属性或者_proto_属性指向null为止(object prototype )。
对象的_proto_的引用链,称为原型链。
注意:有一个性能优化的问题:原型链越深,耗费的时间越多,同理作用域链也是这样。
作用
原型链的存在,主要是为了实现对象的继承。
涉及几个重要的概念
理解原型链,需要从几个概念入手。
1、函数对象
在JavaScript中,函数也是对象。
2、原型对象
当定义一个函数对象时,会包含一个内部属性,叫prototype称之为原型对象。
//普通对象
var a = {};
console.log(a.prototype);//undefined
3、__proto__
在创建对象的时候,都会有一个[[proto]]的内部属性,用于指向创建它的函数对象的prototype(函数对象prototype 指向函数的原型对象)。原型对象也有[[proto]]属性,因此在不断的指向中,形成了原型链。
举个例子来说,我们将对象F的原型对象修改一下,就可以清楚看到上述的关系
function F(){};
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,
doSomething : function(){}
}
这里要加constructor是因为重写了原型对象,之前的constructor属性跟重写的原型对象没有任何关系,所以需要自己手动补上。
6、原型链结构
function F(){
this.name = 'zhang';
};
var f1 = new F();
var f2 = new F();
完整原型链
javascript 之原型、原型链-14的更多相关文章
- 对Javascript 类、原型链、继承的理解
一.序言 和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承 ...
- 图解JavaScript中的原型链
转自:http://www.jianshu.com/p/a81692ad5b5d typeof obj 和 obj instanceof Type 在JavaScript中,我们经常用typeof o ...
- JavaScript -- 继承与原型链
JavaScript对象有一个指向一个原型对象的链,当试图访问一个对象的属性的时候,他不仅仅会在该对象上面搜寻,还会搜寻该对象的原型,以及对象的原型的原型,依次层层搜索,直到找到名字匹配的属性或者到达 ...
- JAVASCRIPT闭包以及原型链
方法内部还有个方法,实例化父方法后,再次调用父方法,可以运行父方法内部的子方法,这样的程序就叫做闭包 DEMO如下: //function outerFn() { // var outerVar = ...
- javascript进阶-《原型对象和原型链》
原创发布 by @一像素 2015.12 在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象Object 和 函数对象Function. 一般而言,通过new Fun ...
- JavaScript原型&原型链
原型&原型对象 先来一段简单的代码: function Fun(name) { this.name = name } var obj = new Fun('obj') JavaScript中的 ...
- 浅谈Javascript中的原型、原型链、继承
构造函数,原型,实例三者的关系 构造函数: 构造函数是创建对象的一种常用方式, 其他创建对象的方式还包括工厂模式, 原型模式, 对象字面量等.我们来看一个简单的构造函数: function Produ ...
- JavaScript ES5类 原型 原型链 组合、原型、寄生式继承
ES5类 原型 原型链 继承 JavaScript中,原型是相对于构造函数(类)的叫法(或者说概念),原型链是相对于构造函数(类)的实例对象的叫法. 对于JavaScript对象,如果在对象自身上找 ...
- JavaScript中的原型、原型链、原型模式
今天,咱来聊聊JavaScript中的原型跟原型链 原型跟原型模式 这一块的知识,主要是设计模式方面的. 首先,我们知道JavaScript是面向对象的.既然是面向对象,那它自然也有相应的类跟对象等概 ...
随机推荐
- Confluence5.4.4迁移至6.3.1
1.数据备份 服务器查看: 2.安装破解文件及安装包至服务器 3.停止旧版本并启动安装 4.访问8090端口开始安装 5.获取授权码,需要能访问国外网站,并且有atlassian账号 6.将数据库连接 ...
- 正则表达式与grep
一.回溯引用 1.将页面中合法的标题找出来,使用回溯引用匹配 (需要使用 -E 或 -P 来扩展grep语法支持) 2.查找连续出现的单词 二.前后查找 (grep 只能使用 -P 选项) 1. 向前 ...
- Codebase Refactoring (with help from Go)
Codebase Refactoring (with help from Go) 代码库重构(借助于Go) 1.摘要 Go应该添加为类型创建替代等效名称的能力,以便在代码库重构期间渐进代码修复.本文解 ...
- [编织消息框架][传输协议]sctp
OSI(Open System Interconnect),即开放式系统互联. 一般都叫OSI参考模型,是ISO(国际标准化组织)组织在1985年研究的网络互联模型. 该体系结构标准定义了网络互连的七 ...
- Spring aop 注解参数说明
在spring AOP中,需要使用AspectJ的切点表达式语言来定义切点. 关于Spring AOP的AspectJ切点,最重要的一点是Spring仅支持AspectJ切点指示器(pointcut ...
- 面向对象 初级版 (Preview) 未完
概述: 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数里,日后使用无需重复编写,直接调用韩顺即可. 面向对象: 对函数进行分类和封装,让开发'更快更强' 面向对象和面向过程的通 ...
- HTML学习 框架
iframe 在原来的页面嵌入其他页面 <iframe src="其他页面地址" width="宽" height="高" frame ...
- 跟我一起读postgresql源码(八)——Executor(查询执行模块之——可优化语句的执行)
2.可优化语句的执行 可优化语句的共同特点是它们被查询编译器处理后都会生成査询计划树,这一类语句由执行器(Executor)处理.该模块对外提供了三个接口: ExecutorStart.Executo ...
- java 连接 postgresql
最近公司用postgresql这个数据库,看网上说这个数据库还算好用,自己就用了一下,我就是用java连接了一下数据库. 其实每个数据库的连接方式大致相同,只是用到的驱动不同,用不同数据库只需要换不同 ...
- 微信小程序开发之picker选择器组件用法
picker组件时一个从底部弹起的可滚动的选择器(嵌入页面滚动器组件picker-view查看https://mp.weixin.qq.com/debug/wxadoc/dev/component/p ...