切换导航
首页
技术问答
编程语言
前端开发
移动开发
开发工具
程序设计
行业应用
CMS系统
服务器
频道导航
▸ PHP
▸ Java
▸ Java SE
▸ Python
▸ C#
▸ C&C++
▸ Ruby
▸ VB
▸ asp.Net
▸ Go
▸ Perl
▸ netty
▸ Django
▸ Delphi
▸ Jsp
▸ .NET Core
▸ Spring
▸ Flask
▸ Springboot
▸ SpringMVC
▸ Lua
▸ Laravel
▸ Mybatis
▸ Asp
▸ Groovy
▸ ThinkPHP
▸ Yii
▸ swoole
▸ HTML
▸ HTML5
▸ JavaScript
▸ CSS
▸ jQuery
▸ Bootstrap
▸ Angularjs
▸ TypeScript
▸ Vue
▸ Dojo
▸ Json
▸ Electron
▸ Node.js
▸ extjs
▸ Express
▸ XML
▸ ES6
▸ Ajax
▸ Flash
▸ Unity
▸ React
▸ Flex
▸ Ant Design
▸ Web前端
▸ 微信小程序
▸ 微信公众号
▸ iOS
▸ Android
▸ Swift
▸ Hybrid
▸ Cocos2d-x
▸ Flutter
▸ Xcode
▸ Silverlight
▸ cocoa
▸ Cordova
前端之家
JavaScript
理解javascript对象继承
理解javascript对象继承
2019-01-04
JavaScript
前端之家
前端之家
收集整理的这篇文章主要介绍了
理解javascript对象继承
,
前端之家
小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_
403
0@先从一个问题进行研究深入,什么是javascript对象继承?
@H
403
_0@比如我们有一个“动物”对象的构造
函数
。
<div class="jb51code">
<pre class="brush:js;">
function animal() {
this.type = '动物';
}
@H_
403
_0@还有一个“猫”对象的构造
函数
。
@H_
403
_0@我们知道猫也属于动物,如果这个猫对象想要继承动物对象的
属性
,我们该怎么做呢? @H_
403
_0@
构造
函数
绑定
使用构造
函数
绑定是最简单的
方法
,使用call或者apply将父对象绑定在自对象上就可以了。
@H_
403
_0@不过这种
方法
比较少见。 @H_
403
_0@
拷贝继承
如果把父对象的所有
属性
和
方法
,拷贝进子对象,也可以实现继承。
@H_
403
_0@使用
方法
:
@H_
403
_0@
原型继承(prototype)
相比于上面的直接绑定,原型继承的
方法
比较常见,对于prototype,我自己简单总结了一下。 @H_
403
_0@
函数都有一个prototype
属性
,这个
属性
是指向一个对象的引用,当使用new关键字创建新实例的时候,这个实例对象会从原型对象上继承
属性
和
方法
。 @H_
403
_0@也就是说,如果将“猫”构造
函数
的prototype
属性
指向一个“动物”实例,那么再创建“猫”对象实例的时候,就继承了“动物”对象的
属性
和
方法
了。 @H_
403
_0@
继承实例
@H_
403
_0@1、
代码
第一行,我们将cat
函数
的prototype对象指向一个animal对象的实例(其中就包含了animal的type
属性
了)。 @H_
403
_0@2、
代码
第二行是什么意思呢? @H_
403
_0@1)、首先,假如我们没有加这行
代码
,运行 @H_
403
_0@ cat.prototype = new animal(); console.log(cat.prototype.constructor == animal); //true 也就是说,其实每个prototype对象都有一个constructor
属性
,指向它的构造
函数
。 @H_
403
_0@2)、我们再看下面的
代码
@H_
403
_0@由上我们看到实例cat1的构造
函数
是animal,所以,显然是不对的。。。cat1明明是new cat()才
生成
的,所以我们应该手动纠正。cat.prototype对象的constructor值改为cat。 @H_
403
_0@3)、所以这也是我们应该注意的一点,如果我们替换了prototype对象,就应该手动纠正prototype对象的constructor
属性
。 @H_
403
_0@ o.prototype = {}; o.prototype.constructor = o;
直接继承prototype
由于在animal对象中,不变的
属性
可以直接写在animal.prototype中。然后直接让cat.prototype指向animal.prototype也就实现了继承。 @H_
403
_0@现在我们先将animal对象改写成:
@H_
403
_0@然后再实现继承:
@H_
403
_0@与上一种
方法
相比,这种
方法
显得效率更高(没有创建animal实例),节省了空间。但是这样做正确吗?答案是不正确,我们继续看。 @H_
403
_0@ cat.prototype = animal.prototype; 这行
代码
让cat.prototype和animal.prototype指向了同一个对象,所以如果改变了cat.prototype的某一个
属性
,都会反映到animal.prototype上,这显然不是我们想要看到的。 @H_
403
_0@比如我们运行: @H_
403
_0@ console.log(animal.prototype.constructor == animal) //false 结果看到是false,为什么呢?cat.prototype.constructor = cat;这一行就会把animal.prototype的constructor
属性
也改掉了。 @H_
403
_0@利用空对象作为中介
@H_
403
_0@结合上面两种
方法
,因为F是空对象,所以几乎不占内存。这时
修改
cat的prototype对象,就不会影响到animal的prototype对象。 @H_
403
_0@ console.log(animal.prototype.constructor == animal); // true 然后我们将上面的
方法
封装一下:
@H_
403
_0@使用的时候,
方法
如下:
@H_
403
_0@Child.uber = Parent.prototype; 这行
代码
就是个桥梁作用,让子对象的uber
属性
直接指向父对象的prototype
属性
,等于在自对象上打开一条叫uber的通道,让子对象的实例能够使用父对象的所有
属性
和
方法
。 @H_
403
_0@以上就是对javascript对象继承我的理解,希望或多或少能够帮助到大家,谢谢大家的阅读。
javascript对象
javascript对象继承
javascript继承
上一篇:js如何准确获取当前页面url网址信息
下一篇:jqGrid 学习笔记整理——进阶篇(一
猜你在找的JavaScript相关文章
Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支...
作者:前端之家 时间:2021-02-22
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其...
作者:前端之家 时间:2021-02-22
搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提...
作者:前端之家 时间:2021-02-22
前端对base64编码的理解,原生js实现字符base64编码
@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是...
作者:前端之家 时间:2021-02-22
搞懂:MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图...
作者:前端之家 时间:2021-02-22
js判断浏览器是否支持webGL
起因是我之前开发的网页,用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
作者:前端之家 时间:2021-02-14
js判断undefined和null
js判断undefined js判断null js判断null和undefined
作者:前端之家 时间:2021-02-14
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
作者:前端之家 时间:2021-02-14
聊一聊 bootstrap 的轮播图插件
今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插...
作者:前端之家 时间:2021-02-14
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
作者:前端之家 时间:2021-02-14
编程分类
HTML
HTML5
JavaScript
CSS
jQuery
Bootstrap
Angularjs
TypeScript
Vue
Dojo
Json
Electron
Node.js
extjs
Express
XML
ES6
Ajax
Flash
Unity
React
Flex
Ant Design
Web前端
微信小程序
微信公众号
最新文章
• Javascript中的事件冒泡与
• 搞懂js中小数运算精度问题
• 搞懂:前端跨域问题JS解决
• 前端对base64编码的理解,
• 搞懂:MVVM模型以及VUE中的
• js实现横向跑马灯效果
• js判断浏览器是否支持webG
• js判断undefined和null
• 将文字自动转为banner打印
• 聊一聊 bootstrap 的轮播图
热门标签
更多 ►
关闭广告
单独headers
封装代码
提示错误
整数正则
非0开头
跳页
出页码
antd table
提示URL未注册
公众号支付
vue hash模式
iSlider
车牌键盘
循环图片
echarts 双折
左右布局
DllPlugin
对象创建
打字游戏
圈选
两栏
云函数
蒙版
ES2020
橱窗
无缝滚动轮播
色块碰撞
组件销毁
文档操作