在ES6之前,javascript不跟其他语言一样,有直接继承的方法,它需要借助于构造函数+原型对象模拟实现继承。现在我们可以利用ES6的extends方法实现继承,如果想了解更多有关ES6实现的继承请查看《ES6学习笔记(二):教你玩转类的继承和类的对象》,在这里不再做更多的介绍。

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 = uname
this.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 = uname
this.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实现继承的方法的更多相关文章

  1. Javascript中,实现类与继承的方法和优缺点分析

    Javascript是一种弱类型语言,不存在类的概念,但在js中可以模仿类似于JAVA中的类,实现类与继承 第一种方法:利用Javascript中的原型链 //首先定义一个父类 function An ...

  2. 前端试题本(Javascript篇)

    JS1. 下面这个JS程序的输出是什么:JS2.下面的JS程序输出是什么:JS3.页面有一个按钮button id为 button1,通过原生的js如何禁用?JS4.页面有一个按钮button id为 ...

  3. 3 HTML&JS等前端知识系列之javascript的基础

    preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式 条件判断,循环流程等. 函数 面向对象 what ...

  4. 前端学习 第二弹: JavaScript中的一些函数与对象(1)

    前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...

  5. web前端面试试题总结---javascript篇

    JavaScript 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的 ...

  6. 前端开发面试题-JavaScript(转载)

    本文由 本文的原作者markyun 收集总结. 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol ...

  7. JavaScript对象继承方式

    一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Parent 构造函数 成为 Children 的方法, ...

  8. Javascript模拟继承(赠送.net吐槽一段)

    首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...

  9. 详解Javascript的继承实现

    我最早掌握的在js中实现继承的方法是在w3school学到的混合原型链和对象冒充的方法,在工作中,只要用到继承的时候,我都是用这个方法实现.它的实现简单,思路清晰:用对象冒充继承父类构造函数的属性,用 ...

随机推荐

  1. 解决IntelliJ IDEA Community 社区版 启动Tomcat插件 "Smart Tomcat" NullPointerException 空指针异常

    IntelliJ IDEA Community社区版默认是没有Ultimate版的Tomcat Server,这时候就可以使用插件"Smart Tomcat"; 在"Ru ...

  2. ThreadPoolExecutor自定义线程池

    1.ThreadPoolExecutor创建线程池的构造函数 public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long ...

  3. [ZJOI2019]麻将(DP+有限状态自动机)

    首先只需要考虑每种牌出现的张数即可,然后判断一副牌是否能胡,可以DP一下,令f[i][j][k][0/1]表示到了第i位,用j次i-1,i,i+1和k次i,i+1,i+2,是否出现对子然后最大的面子数 ...

  4. IE浏览器弹出的文件下载工具条实现自动另存为

    IE浏览器中如果有一个文件可以下载,用鼠标点击一下文件的超链接,会在IE浏览器下方出现一个工具条,工具条上主要有“打开” “保存”两个按钮. 如果点击“保存”按钮,会把附件保存到系统的“下载”或“Do ...

  5. [USACO09DEC]雪橇Bobsledding(贪心)

    https://www.luogu.org/problem/P2968 题目描述 Bessie has entered a bobsled competition because she hopes ...

  6. dubbo同步/异步调用的方式

    我们知道,Dubbo 缺省协议采用单一长连接,底层实现是 Netty 的 NIO 异步通讯机制:基于这种机制,Dubbo 实现了以下几种调用方式: 同步调用(默认) 异步调用 参数回调 事件通知 同步 ...

  7. Docker系列一: docker简介及基本环境安装

    Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Li ...

  8. 回归分析|r^2|Se|变差|多重相关系数|决定系数|多重共线性|容忍度|VIF|forward selection|backward elimination|stepwise regression procedure|best-subset approach|回归方程的置信区间|预测区间|残差分析|虚拟变量

    应用统计学-回归分析 拟合度使用r^2和Se来检验. 显著性检验中,对于线性model使用ANOVA,对于单独的回归系数使用t检验. 最小二乘法.贝叶斯和最大似然都可用于求回归参数,最小二乘法是最小化 ...

  9. 关于 Cantor 集不可数的新观点

    第一步操作:将区间 $[0,1]$ 中去掉开区间 $(\frac{1}{3},\frac{2}{3})$ 后,就形成了两个不交闭区间.于是这两个不交闭区间中至少有两个元素,正好是集合 $\{1\}$ ...

  10. Cocos2dx-JS学习01

    123456 <body><script src="res/loading.js"></script><canvas id="g ...