JavaScript 原型链学习(一)原型对象
在JavaScript中创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有的实例共享的属性和方法。如果按照字面意思来理解,那么prototype就是通过调用构造函数而创建那个实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中,如下例所示:
function Person(){} Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function() {
alert(this,name);
}; var person1 = new Person();
person1.sayName(); // "Nicholas" var person2 = new Person();
person2.sayName(); // "Nicholas" alert(person1.sayName == person2.sayName); //true
本例中将sayName()方法和所有属性直接添加到了Person的prototype属性中,构造函数变成了空函数。即使如此,也仍然可以通过调用构造函数来创建新对象,而且新对象还会具有相同的属性和方法,同时这些属性和方法是由所有实例共享的。换句话说,person1和person2访问的都是同一组属性和同一个sayName()函数。
原型对象的性质
无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个 prototype 属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个 constructor(构造函数)属性,这个属性是一个指向prototype 属性所在函数的指针。就拿前面的例子来说,Person.prototype.constructor指向Person。而通过这个构造函数,我们还可继续为原型对象添加其他属性和方法。
创建了自定义的构造函数之后,其原型对象默认只会取得constructor属性;至于其他方法,则都是从Object继承而来的。当调用构造函数创建一个新实例后, 该实例的内部将包含一个指针 (内部属性)指向构造函数的原型对象。ECMA-262第5版中管这个指针叫[[Prototype]]。虽然在脚本中没有标准的方式访问 [[Prototype]] 但Firefox、Safari 和Chome在每个对象上都支持一个属性 __proto__ ;而在其他实现中,这个属性对脚本则是完全不可见的。不过,要明确的真正重要的一点就是,这个连接存在于实例与构造函数的原型对象之间,而不是存在于实例与构造函数之间。
用上例中使用的 Person 构造函数和 Person.prototype 创建实例的代码为例,下图展示了各个对象之间的关系。
上图展示了Person构造函数、Person 的原型属性以及Person现有的两个实例之间的关系。在此,Person.prototype指向了原型对象,而Person.prototype.constructor又指回了Person。原型对象中除了包含constructor属性之外,还包括后来添加的其他属性。 Person的每个实例——person1和person2都包含一个内部属性,该属性仅仅指向了Person.prototype;换句话说,它们与构造函数没有直接的关系。此外,要格外注意的是,虽然这两个实例都不包含属性和方法,但我们却可以调用person1.sayName()。这是通过查找对象属性的过程来实现的。
虽然在所有实现中都无法访问到[[Prototype]],但可以通过isPrototypeOf()方法来确定对象之间是否存在这种关系。从本质上讲,如果[[Prototype]]指向调用isPrototypeOf()方法的对象(Person.prototype),那么这个方法就返回true,如下所示:
alert(Person.prototype.isPrototypeOf(person1)); / /true
alert(Person.prototype.isPrototypeOf(person2)); / /true
这里,用原型对象的isPrototypeOf()方法测试了person1 和person2。 因为它们内部都有一个指向Person.prototype的指针,因此都返回了true。
每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性,则返回该属性的值。也就是说,在我们调用person1.sayName()的时候,会先后执行两次搜索。首先,解析器会问:“实例person1有sayName属性吗?” 答:“没有。” 然后,它继续搜索,再问:“person1 的原型有sayName属性吗?” 答:“有。” 于是,它就读取那个保存在原型对象中的函数。当我们调用person2.sayName()时,将会重现相同的搜索过程,得到相同的结果。而这正是多个对象实例共享原型所保存的属性和方法的基本原理。
虽然可以通过对象实例访问保存在原型中的值,但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性,而该属性与实例原型中的一个属性同名,那我们就在实例中创建该属性,该属性将会屏蔽原型中的那个属性。
JavaScript 原型链学习(一)原型对象的更多相关文章
- javaScript 原型与原型链学习笔记
javaScript中,原型是常用到一种方式,它能降低储存占用,写出更高效的代码 原型常用到的则是prototype属性 JavaScript prototype 属性 定义和用法 prototype ...
- JavaScript ES5类 原型 原型链 组合、原型、寄生式继承
ES5类 原型 原型链 继承 JavaScript中,原型是相对于构造函数(类)的叫法(或者说概念),原型链是相对于构造函数(类)的实例对象的叫法. 对于JavaScript对象,如果在对象自身上找 ...
- JavaScript原型(链)学习笔记
javascript是基于原型的一门脚本语言,那究竟原型是什么? 本文将从以下几个方面重点阐述原型 构造函数是什么? 构造函数和我们常见的Array String有什么关系? 原型的使用? __pro ...
- javascript原型原型链 学习随笔
理解原型和原型链.需从构造函数.__proto__属性(IE11以下这个属性是undefined,请使用chrome调试).prototype属性入手. JS内置的好多函数,这些函数又被叫做构造函数. ...
- JavaScript原型与原型链学习笔记
一.什么是原型?原型是一个对象,其他对象可以通过它实现属性继承.简单的说就是任何一个对象都可以成为原型 prototype属性: 我们创建的每个函数都有一个prototype属性,这个属性是一个指针, ...
- JavaScript 原型链学习(四)原型链的基本概念、原型链实现继承
简单回顾一下构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针.那么,假如我们让原型对象等于另一个类型的实例,结果会 ...
- JS 原型链学习总结
废话篇: 在js的学习过程中有一大难点就是原型链.学习的时候一直对这一内容不是十分的明白.纠结的我简直难受.,幸好总算给他弄通了,哇咔咔,总算可以不用在睡梦中还想着他了. 正文篇: 要了解原型链我们首 ...
- 原型链(_proto_) 与原型(prototype) 有啥关系?
prototype对象里面方法及属性是共享的...... 1.JavaScript 中每一个对象都拥有原型链(__proto__)指向其构造函数的原型( prototype),object._prot ...
- js原型链理解(2)--原型链继承
1.原型链继承 2.constructor stealing(构造借用) 3.组合继承 js中的原型链继承,运用的js原型链中的__proto__. function Super(){ this.se ...
随机推荐
- page load时执行JavaScript
// Multiple onload function created by: Simon Willison // http://simonwillison.net/2004/May/26/addLo ...
- 卸载ie
今天卸载ie11失败,最后使用下面这个命令实现了卸载,记录下 IE11卸载命令如下: FORFILES /P %WINDIR%\servicing\Packages /M Microsoft-Wind ...
- 在iPhone手机上写了input type="date" 显示不出来的原因
在iPhone手机上写了input type="date" 显示不出来的原因 今天在手机页面上使用新的input类型,这样子写,在chrome浏览器上浏览,很好,显示出来.然后用i ...
- Excel反序排列
实际工作中有这样一个需求,将Excel列表中所有的条目进行反序排列,有人说这还不简单直接选中某一列按照这列排序(升序或降序)就可以了. 但问题是这里没有可以参考的列,进行排序. 比如: 想转换为: 那 ...
- 哈密顿绕行世界问题 (dfs)
一个规则的实心十二面体,它的 20个顶点标出世界著名的20个城市,你从一个城市出发经过每个城市刚好一次后回到出发的城市. Input前20行的第i行有3个数,表示与第i个城市相邻的3个城市.第20行 ...
- Retrofit2 项目配置
在项目的 app build.gradle 文件中加入 dependencies { // Retrofit2implementation 'com.squareup.retrofit2:retro ...
- 【微信小程序——开发步骤1】
知识点: view,image,text编写文本框架 使用弹性盒子动态布局 使用rpx调试分辨率 在wxml中查看默认样式属性 步骤: 1.以如图页面实例说明如何写出微信文本内容 先对页面写出整体 ...
- 根据某个字段去重 根据另一个字段排序的一个SQL
背景:一张表 有 name , crt_time , work_sts 三个字段 这张表里存在这样的数据 'a', '2018-12-18 21:37:24', '未''a', '2018-12-19 ...
- windows下eclipse实现操作虚拟机ubantu中的hdfs hbase
1.首先打开虚拟机,查看虚拟机的ip地址 2.修改C:\Windows\System32\drivers\etc下的主机名与ip的映射文件 3.配置Map/reduce 配置成功后可以查看hdfs文件 ...
- 根据Excel模板,填写报表,并下载到web浏览器端
package com.neusoft.nda.basic.recordmanager.viewelec.servlet; import java.io.File; import java.io.Fi ...