对js中的原型的理解
这篇文章讲解的很清楚,因此转载到自己的博客上,如有侵权,请联系我删除。
原文地址:https://www.jianshu.com/p/eff5e130fc28
原型prototype是javascript中极其重要的概念之一,但也是比较容易引起混淆的地方。我们需要花费一些时间和精力好好理解原型的概念,这对于我们学习javascript是必须的。
原型的概念
真正理解什么是原型是学习原型理论的关键。很多人在此产生了混淆,没有真正理解,自然后续疑惑更多。
首先,我们明确原型是一个对象,其次,最重要的是,
** Every function has a prototype property and it contains an object **
这句话就是说,每个函数都有一个属性叫做原型,这个属性指向一个对象。
也就是说,原型是函数对象的属性,不是所有对象的属性,对象经过构造函数new出来,那么这个new出来的对象的构造函数有一个属性叫原型。明确这一点很重要。
** The prototype property is a property that is available to you as soon as you define the function. Its initial value is an "empty" object.
**
每次你定义一个函数的时候,这个函数的原型属性也就被定义出来了,也就可以使用了,如果不对它进行显示赋值的话,那么它的初始值就是一个空的对象Object。
所以,综上我们知道我们讨论原型的时候,都是基于函数的,有了一个函数对象,就有了原型。切记这一点,讨论原型,不能脱离了函数,它是原型真正归属的地方,** 原型只是函数的一个属性 **!
function foo(a,b) {
return a+b;
}
foo.prototype
foo.constructor
chrome控制台测试结果
我们可以看到函数foo的原型是空对象Object,所有函数的构造函数都是Function。
使用原型给对象添加方法和属性
不使用原型,使用构造函数给对象添加属性和方法的是通过this,像下面这样。
function Gadget(name, color) {
this.name = name;
this.color = color;
this.whatAreYou = function() {
return 'I am ' + this.color + ' ' + this.name;
}
}
Gadget是一个构造函数,作为一个函数,它有一个属性,这个属性是原型,它指向一个对象,目前我们没有设置这个属性,所以它是一个空的对象。
** Adding methods and properties to the prototype property of the constructor
function is another way to add functionality to the objects this constructor produces **
当我们有了原型之后,我们可以给构造函数的原型对象添加属性和方法来。
像下面这样
Gadget.prototype.price = 100;
Gadget.prototype.rating = 3;
Gadget.prototype.getInfo = function() {
return 'Rating: ' + this.rating +', price: ' + this.price;
}
给原型添加了属性和方法后,原型所指的对象也会更新
使用原型对象的属性和方法
我们使用原型的对象和方法不会在直接在构造函数上使用,而是通过构造函数new出一个对象,那么new出来的对象就会有构造函数原型里的属性和方法。
这里很容易造成误解,我们需要强调newtoy这个new出来的对象是没有原型的,原型只是函数对象的一个属性,newtoy是通过构造函数new出来的对象,所以他不是函数对象,也没有prototype属性,我们在chrome的控制台里自然也无法访问他的prototype属性。
但我们可以通过构造函数访问。
我们知道每个对象都有constructor属性,newtoy的constructor属性就指向Gadget,那么我们通过constructor可以访问到prototype。
到这里,我们对为什么要通过constructor.protptype访问属性应该清楚了。(笔者第一次接触原型就没看懂这个),切记,原型是函数对象的属性,只有函数对象才有原型就容易理解了。
原型的实时性
这里特别需要提出,原型是实时的,意思就是原型对象的属性和方法会实时更新。其实很好理解,javascript中对象是通过引用传递的,原型对象只有一份,不是new出一个对象就复制一份,所以我们对原型的操作和更新,会影响到所有的对象。这就是原型对象的实时性。
自身属性与原型属性
这里涉及到javascript是如何搜索属性和方法的,javascript会先在对象的自身属性里寻找,如果找到了就输出,如果在自身属性里没有找到,那么接着到构造函数的原型属性里去找,如果找到了就输出,如果没找到,就null。
所以,如果碰到了自身属性和原型属性里有同名属性,那么根据javascript寻找属性的过程,显然,如果我们直接访问的话,会得到自身属性里面的值。
我们加下来做一个小实验,寻找toString方法是谁的属性,一步步寻找
通过实验我们可以发现,原来toString方法是object的原型对象的方法。
isPrototypeOf()
Object的原型里还有这样一个方法isPrototypeOf(),这个方法可以返回一个特定的对象是不是另一个对象的原型,实际这里不准确,因为我们知道只有函数对象有原型属性,普通对象通过构造函数new出来,自动继承了构造的函数原型的属性方法。但这个方法是可以直接判断,而不需要先取出constructor对象再访问prototype。看下面的例子:
function Human(name) {
this.name = name;
}
var monkey = {
hair:true,
feeds:'banana',
}
Human.prototype = monkey;
var chi = new Human('chi');
我们知道chi这个对象是没有原型属性的,它有的是他的构造函数的原型属性monkey。但isPrototypeOf直接判断,实际上是省略了获取构造函数的过程,搞清楚这里面的区别。
object还有一个getPrototypeOf方法,基本用法和isPrototype一样,参考下面的代码:
神秘的proto链接
我们之前访问对象的原型,都要先取得构造函数然后访问prototype
chi.constructor.prototype;
newtoy.constructor.prototype;
这样是不是特别别扭,所以各个浏览器一般都会给出一个proto属性,前后分别有双下划线,对象的这个属性可以直接访问到构造函数的原型。这就很方便了。所以proto与prototype是有很大区别的。区别就在此。proto是实例对象用来直接访问构造函数的属性,prototype是函数对象的原型属性。
chi.constructor.prototype == chi.__proto__
显然现在已经很容易弄清楚了proto和prototype的区别了。
原型的陷阱
原型在使用的时候有一个陷阱:
** 在我们完全替换掉原型对象的时候,原型会失去实时性,同时原型的构造函数属性不可靠,不是理论上应该的值。**
这个陷进说的是什么呢?好像不太明白
举个例子我们就懂了
function Dog() {
this.tail = true;
}
var benji = new Dog();
var rusty = new Dog();
Dog.prototype.say = function () {
return 'Woof!';
};
我们进行测试:
直到这里一切都是正常的
接下来我们将原型对象整个替换掉
Dog.prototype = {
paws: 4,
hair: true
};
通过测试我们发现,我们没法访问刚刚更新的原型对象,却能访问之前的原型对象,这说明没有实现实时性。
我们继续测试
我们发现这时新建的对象可以访问更新后的原型,但是构造方法又不对了,本来constructor属性应该指向dog,结果却指向了Object。这就是javascript中的原型陷阱。
我们很容易解决这个问题,只要在更新原型对象后面,重新指定构造函数即可。
Dog.prototype.constructor = Dog;
这样所有就按正常的运行了
** 所以我们切记在替换掉原型对象之后,切记重新设置constructor.prototype **
小结
我们大概介绍了原型中容易混淆的问题,主要有以下几方面:
- 所有函数都有一个属性prototype,这就是我们指的原型,他的初始值是一个空的对象
- 你可以原型对象添加属性和方法,甚至直接用另一个对象替换他
- 当你用构造函数new出一个对象之后,这个对象可以访问构造函数的原型对象的属性和方法
- 对象的自身属性搜索的优先级比原型的属性要高
- proto属性的神秘连接及其同prototype的区别
- prototype使用中的陷阱
作者:六尺帐篷
链接:https://www.jianshu.com/p/eff5e130fc28
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
原文地址:https://www.cnblogs.com/tyj75257/p/11398398.html
- Philip S.Yu 讲的广度学习到底是什么?
- Kubernetes服务网格(第10部分):服务网格API
- 刚刚,同程与艺龙宣布合并!去你的大数据!
- 从蓝光到4K,腾讯视频高码率下载背后的技术
- 从开发者的角度比较IAAS与PAAS
- 图灵机器人郭家:以语义技术为核心驱动力,让机器更好地理解世界
- 静态条码设支付上限,500元封顶,海外支付尚未通知
- 如何自动地将代码从Git平台部署至组件容器
- 聂卫平说过人工智能不会取代人类 只会让我们生活的更加美好
- 万达裁员遭人大教授怒怼:员工如告了 王健林赔不少
- 习题3.13
- 谷歌数据显示比特币年度搜索量排名位居前列
- 初学者指南OpenStack:基础
- C++中指针和引用的区别
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- (长文预警) 你还在烦工作中碰到的拖拽问题?一个框架jiejue
- 重磅 | 青藤与腾讯安全隆重举办容器安全平台新品战略合作发布会
- 如何使用强化学习玩21点?
- 这3个Scikit-learn的特征选择技术,能够有效的提高你的数据预处理能力
- 使用神经网络解决拼图游戏
- 用机器学习预测收益
- 一种基于深度学习的低成本细胞生物学研究方法
- 从零搭建Spring Boot脚手架(2):增加通用的功能
- Qt官方示例-K线图
- 一个快速构造GAN的教程:如何用pytorch构造DCGAN
- 从0到1开发测试平台(八)后端服务添加lombok第三方类库
- 【CSS】470- 是时候开始用 CSS 自定义属性了
- 一个安卓App,如何成为DuerOS 上的技能应用呢?
- 什么是SPU、SKU、SKC、ARPU
- C++判断类型的模板