什么是JavaScript原型
JS 原型
转载自【EC前端 - JavaScript原型】
原型是JavaScript最重要的概念。同时也是初级开发者最忌惮的内容,原因在于网上很少有关于它的合理描述。
但事实上,原型很简单,你可以很轻松的掌握它的知识要点。
什么是原型
了解什么是原型之前,我们先看一个示例:
var obj = {};
obj.toString(); // "[object Object]"
上面的例子中,我们声明了一个空对象,并没有为它添加toString
属性方法,但这个方法却可以被成功调用并输出。是不是觉得很神奇?
原因在于JavaScript的对象都有一个内置的[[Prototype]]
私有属性,这个属性指向另一个对象,我们称这个对象为原对象的原型。当JS引擎访问obj
的toString
属性时,首先会去obj
对象查找,发现找不到,就沿着obj
的[prototype]
属性去他的原型上查找。
通过Chrome开发者工具,我们可以看到这个obj
原型的真面目:
图中我们可以看到,obj
的原型对象已经定义了一个toString
属性。所以,空对象也可以使用toString()
这个属性方法。
为什么需要原型
原型意义在于实现属性的继承。
想象一下:编写一个JS脚本,创建1000个数组实例。如果在每个数组实例中单独定义数组的操作方法,不仅代码冗余,还会内存资源极大的浪费。有了原型,我们只需要把数组的操作方法定义在数组的原型上即可,实现了属性的共享。
举个例子:
我们希望JS的数字类型能提供一个方法判断当前数字是否为奇数,没有原型的情况下,你只能这么做:
var num = new Number(99);
num.isOdd = function(){return this % 100 !== 0};
num.isOdd(); // true
但是这样是没有意义的,因为isOdd()
方法定义在num
变量上面,其他数字类型并不能使用它:
var num2 = 100;
num2.isOdd(); // num2.isOdd is not a function
有了原型概念以后,由于所有数字类型都指向了同一个原型,我们可以把isOdd
方法定义在这个原型上,这样,所有数字类型就都能调用到这个方法了:
var num1 = 99, num2 = 100, num3 = 0;
Number.prototype.isOdd = function(){return this % 100 !== 0};
num1.isOdd(); // true
num2.isOdd(); // false
num3.isOdd(); // false
学习后面的内容,你将明白:Number.prototype
指向数字类型的原型
原型链
原型并不是一个特别的存在,它也只是一个普通的对象而已。
换句话说,原型也可以拥有属于它的原型。如果把对象的[[prototype]]
属性想象成链条,就形成了一条原型链。
接下来,我们通过一个示例来看下JS引擎是如何通过原型链查找属性的:
现在创建三个对象,并通过Object.setPrototypeOf()
方法将它们连结成一条原型链:
var son = {a: 1, b: 2},
parent = {b: 3, c: 4},
ancestor = {d: 5};
Object.setPrototypeOf(son, parent);
Object.setPrototypeOf(parent, ancestor);
son.a // 1
son.b // 2
son.c // 4
son.d // 5
这三个对象形成将形成一条原型链,JS引擎将从左往右有序地查找目标属性:
如何设置和修改对象的原型
JavaScript分别通过 Object.setPrototypeOf() 和Object.getPrototypeOf() 两个方法来设置和获取对象的原型。
var parent = {type: 'parent'}, son = {type: 'son'};
Object.setPrototypeOf(son, parent);
Object.getPrototypeOf(son) === parent // true
内置对象实例的原型
JavaScript提供了一些内置对象(构造函数),比如Object, String, Array, Boolean等等,它们提供了prototype
属性,指向实例的原型。因此,可以简单地通过instance.constructor.prototype
来获取
var obj = {}, str = '', arr = [], bl = true;
Object.getPrototypeOf(obj) === obj.constructor.prototype // true
Object.getPrototypeOf(str) === str.constructor.prototype // true
Object.getPrototypeOf(arr) === arr.constructor.prototype // true
Object.getPrototypeOf(bl) === bl.constructor.prototype // true
如果你不理解constructor
这个属性,可以阅读构造函数一节。
通过instance.constructor.prototype
这种方式获取原型的方式并不是绝对可靠的。因为实例的constructor
属性是可改变的(mutable)。一旦属性,instance.constructor.prototype
便无法正确指向实例的原型。
var obj = new Object();
obj.constructor = Array;
Object.getPrototypeOf(obj) === obj.constructor.prototype // false
上面的例子中,我们随意修改了obj的constructor
属性,然后obj.constructor.prototype
便不再指向obj
的原型了。
另外,对于自定义构造函数而言,其constructor
也是可变的(内置构造函数的constructor
被配置为不可改变)
综合来说,我们推荐使用 Object.getPrototypeOf() 方法获取实例原型。
什么是JavaScript原型的更多相关文章
- 浅谈系列之 javascript原型与对象
在我学习与使用javascript三个月中,我一直对javascript的继承关系以及prototype理解不清,导致很多时候为什么这么用说不出个所以然来.截止到本周为止,通过之前的学习以及自己的再学 ...
- JavaScript原型OOP——你上车了吗?
.title-bar { width: 80%; height: 35px; padding-left: 35px; color: white; line-height: 35px; font-siz ...
- 深入理解javascript原型和闭包 (转)
该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的两个部分--原型和闭包,当然,肯定少不了原型链和作用域链.帮 ...
- 深入理解javascript原型和闭包系列
从下面目录中可以看到,本系列有16篇文章,外加两篇后补的,一共18篇文章.写了半个月,从9月17号开始写的.每篇文章更新时,读者的反馈还是可以的,虽然不至于上头条,但是也算是中规中矩,有看的人,也有评 ...
- 深入理解javascript原型和闭包(1)——一切都是对象
“一切都是对象”这句话的重点在于如何去理解“对象”这个概念. ——当然,也不是所有的都是对象,值类型就不是对象. 首先咱们还是先看看javascript中一个常用的函数——typeof().typeo ...
- 深入理解javascript原型和闭包(2)——函数和对象的关系
上文(理解javascript原型和作用域系列(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断. var fn = function () { }; co ...
- 深入理解javascript原型和闭包(3)——prototype原型
既typeof之后的另一位老朋友! prototype也是我们的老朋友,即使不了解的人,也应该都听过它的大名.如果它还是您的新朋友,我估计您也是javascript的新朋友. 在咱们的第一节(深入理解 ...
- 深入理解javascript原型和闭包(4)——隐式原型
注意:本文不是javascript基础教程,如果你没有接触过原型的基本知识,应该先去了解一下,推荐看<javascript高级程序设计(第三版)>第6章:面向对象的程序设计. 上节已经提到 ...
- 深入理解javascript原型和闭包(5)——instanceof
又介绍一个老朋友——instanceof. 对于值类型,你可以通过typeof判断,string/number/boolean都很清楚,但是typeof在判断到引用类型的时候,返回值只有object/ ...
- 深入理解javascript原型和闭包(6)——继承
为何用“继承”为标题,而不用“原型链”? 原型链如果解释清楚了很容易理解,不会与常用的java/C#产生混淆.而“继承”确实常用面向对象语言中最基本的概念,但是java中的继承与javascript中 ...
随机推荐
- 文件系统扫描工具-fsck
文件系统扫描工具-fsck 注意的是fsck扫描文件系统时一定要在单用户模式.修复模式或把设备umount后进行.建议在单用户模式下运行.如果扫描正常运行中的系统,会造成系统文件损坏. fsck不仅可 ...
- 71.纯 CSS 创作一个跳 8 字型舞的 loader
原文地址:https://segmentfault.com/a/1190000015534639#articleHeader0 感想:rotateX() 和rotateZ()一起使用好懵呀. HTML ...
- 李清华 201772020113《面向对象程序设计(java)》第十四周学习总结
1.实验目的与要求 (1) 掌握GUI布局管理器用法: (2) 掌握各类Java Swing组件用途及常用API: 2.实验内容和步骤 实验1: 导入第12章示例程序,测试程序并进行组内讨论. 测试程 ...
- Django10-Form组件
一.Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来.与此同时我们在很多场景下都需要对用户的输入做校验,比如校验用户是 ...
- Windows下nginx下安装amqp
1.复制php_amqp.dll 到php/ext/ 2.复制rabbitmq.4.dll 到php/3.复制rabbitmq.4.dll 到windows/system32/ (如32位) ,64位 ...
- (译)MySQL 8.0实验室---MySQL中的倒序索引(Descending Indexes)
译者注:MySQL 8.0之前,不管是否指定索引建的排序方式,都会忽略创建索引时候指定的排序方式(语法上不会报错),最终都会创建为ASC方式的索引,在执行查询的时候,只存在forwarded(正向)方 ...
- ArcGIS 批量修改数据名称-arcgis案例实习教程
ArcGIS 批量修改数据名称-arcgis案例实习教程 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 功能:批量修改数据/文件名称 使用方法: 输入:文件夹(或者 ...
- Windows下javac不可用,java -version可以
https://blog.csdn.net/kobedir/article/details/79709287
- Java框架spring Boot学习笔记(二):Hello Spring Boot、以及项目属性配置
新建一个新建一个SpringBootTest工程 新建一个HelloController.java文件 package com.example.demo; import org.springframe ...
- Selenium+TestNG+Maven(2)
转载自http://www.cnblogs.com/hustar0102/p/5885115.html selenium介绍和环境搭建 一.简单介绍 1.selenium:Selenium是一个用于W ...