作为前端,你需要懂得javascript实现继承的方法
在ES6之前,javascript不跟其他语言一样,有直接继承的方法,它需要借助于构造函数+原型对象模拟实现继承。现在我们可以利用ES6的extends方法实现继承,如果想了解更多有关ES6实现的继承请查看《ES6学习笔记(二):教你玩转类的继承和类的对象》,在这里不再做更多的介绍。
文章目录
- 1. call()
- 2. 借用构造函数继承父类型属性
- 3. 借用原型对象继承父类型方法
- 总结
ES6之前并没有给我们提供extends继承,我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承。
1. call()
调用这个函数,并且修改函数运行时的this指向
fun.call(thisArg, arg1,arg2,...)
- thisArg:当前调用函数this的指向对象
- arg1, arg2:传递的普通参数
function fn() {console.log('前端岚枫') console.log(this)
}
fn.call() //说明call()可以调用函数,this指向window
var obj = {name: 'lanfeng
}
fn.call(obj) //this指向obj, 说明call可以改变this指向
2. 借用构造函数继承父类型属性
核心思想:通过call()把父类型的this指向子类型的this,这样就可以实现子类型继承父类型的属性。
// 借用父构造函数继承属性
//父构造函数
function Father (uname, age) {//this指向父构造函数的对象实例this.uname = unamethis.age = age
}
// 子构造函数
function Son (uname, age){// this指向子构造函数的对象实例//借助于call,this指向子构造函数对象实例Father.call(this, uname, age)}
var son = new Son('王俊凯',18)
console.log(son) //
3. 借用原型对象继承父类型方法
// 父构造函数
function Father (uname, age) {//this指向父构造函数的对象实例this.uname = unamethis.age = age
}
// 父原型方法
Father.prototype.money = function() {console.log(10000)
}
// 子构造函数
function Son (uname, age){// this指向子构造函数的对象实例//借助于call,this指向子构造函数对象实例Father.call(this, uname, age)}// Son.prototype = Father.prototype 这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会变化/
Son.prototype = new Father()//手动改constructor指回原来的构造函数
Son.prototype.constructor = Son
Son.prototype.exam= function() {console.log('考试')
}
var son = new Son('王俊凯',18)
console.log(son) //
son
结构关系如下图:
总结
今天主要分享了call()方法的用法和javascript通过构造函数+原型对象模拟实现继承的方式。
作为前端,你需要懂得javascript实现继承的方法相关推荐
- 深入解析JavaScript 原型继承
JavaScript 原型继承,学习js面向对象的朋友可以看看.十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Object.prototype Ja ...
- JavaScript对象继承方式
一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Parent 构造函数 成为 Children 的方法, ...
- 【前端芝士树】Javascript的原型与原型链
[前端芝士树]Javascript的原型.原型链以及继承机制 前端的面试中经常会遇到这个问题,自己也是一直似懂非懂,趁这个机会整理一下 0. 为什么会出现原型和原型链的概念 1994年,网景公司(Ne ...
- Web前端经典面试题-JavaScript
Web前端经典面试题-JavaScript 看看银行卡余额,看看工资条,看看房价,动力就来了,大二狗,加油~~ JavaScript 原型链.类.继承.作用域.闭包.js运行机制/单线程.js数据类型 ...
- 3 HTMLJS等前端知识系列之javascript的基础
preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式 条件判断,循环流程等. 函数 面向对象 what ...
- word类型得实参和lpwstr类型的形参不兼容_前端测试题:(解析)关于JavaScript的数据类型,下面说法错误的是?...
考核内容: js 数据类型 题发散度: ★★ 试题难度: ★★ 解题思路: 在ES5的时候,我们认知的数据类型确实是 6种: Number.String.Boolean.undefined.objec ...
- 『前端学习笔记』 JavaScript 事件与对象、DOM与BOM
参考视频:[极客学院]Web前端开发教学 - 第一部分:H5+CSS+JS 参考文档:JavaScript 教程 W3school 文章目录 DOM对象 HTML DOM 操作HTML 操作CSS E ...
- web前端之dojo(用javascript语言实现的开源DHTML工具包)
web前端之dojo(用javascript语言实现的开源DHTML工具包) 一.开始Dojo开发 1.Dojo Toolkit 简介 Dojo 于 2004 年创建,使开发 DHTML 和 Java ...
- JavaScript 七大继承全解析
继承作为基本功和面试必考点,必须要熟练掌握才行.小公司可能仅让你手写继承(一般写 寄生组合式继承 即可),大厂就得要求你全面分析各个继承的优缺点了.这篇文章深入浅出,让你全面了解 JavaScript ...
最新文章
- 北大成功研发 “忘情水” ,可精准删除特定记忆,有望今年进行人体测试
- [异常解决] ubuntu上安装虚拟机遇到的问题(vmware坑了,virtual-box简单安装,在virtual-box中安装精简版win7)
- python issubclass 和 isinstance函数
- 剑桥的商学院硕士的创业项目找我做tech lead,稳得一批
- 怎么让手机变成震动器_详解iPhone 手机标配的两种技术:线性马达和3Dtouch,有多好用?...
- [功能发布]Excel催化剂2周年巨献-网页数据采集功能发布,满足90%合理场景使用...
- (旧)子数涵数·C语言——条件语句
- 云主机用linux还是winows,云服务器一般使用什么系统?Linux还是Windows?
- ssm实训报告心得_Java开发学习心得(一):SSM环境搭建
- 18 计量单位xx未对语言xx定义/在语言xx中没有维护短文本
- 函数指针c语言typedef,typedef 函数指针的用法(附例子)
- ecshop删除购物流程中的配送方式和支付方式
- 准备好要上传到 Azure 的 Windows VHD 或 VHDX
- 金凯瑞在马赫西管理大学毕业典礼的演讲
- 重头系统的学习,不会咱就学!2014.6.18
- python库有哪些餐厅_Python告诉你上海有哪些高性价比的西餐厅
- IT软件技术人员的职位路线(从程序员到技术总监) - 部门管理经验谈(转)
- Gartner陈勇:中国企业更积极探索双模IT
- virtualenv简单使用
- 在MobaXterm中使用键盘快捷键
热门文章
- python伪装浏览器什么意思_python爬虫伪装浏览器出现问题求助
- python爬取appstore的评论数据的步骤_python数据抓取分析
- windows镜像_什么是windows镜像?什么是Ghost?它们有什么优缺点?
- 超图三维可以转换成HTML,iserver上发布的三维场景怎样调用到自己的html页面中?...
- Pinyin4j 的使用 Pinyin4jUtils工具类
- android 服务是什么问题,Android Studio 中的Service问题
- FileZilla 服务器端win server2008以上的配置
- Python学习入门8:新人怎么学习Python
- vscode 开发vue必备插件_vsCode开发vue项目必备插件
- pycharm默认注释与快捷键功能