作为前端,你需要懂得javascript实现继承的方法
在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实现继承的方法的更多相关文章
- Javascript中,实现类与继承的方法和优缺点分析
Javascript是一种弱类型语言,不存在类的概念,但在js中可以模仿类似于JAVA中的类,实现类与继承 第一种方法:利用Javascript中的原型链 //首先定义一个父类 function An ...
- 前端试题本(Javascript篇)
JS1. 下面这个JS程序的输出是什么:JS2.下面的JS程序输出是什么:JS3.页面有一个按钮button id为 button1,通过原生的js如何禁用?JS4.页面有一个按钮button id为 ...
- 3 HTML&JS等前端知识系列之javascript的基础
preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式 条件判断,循环流程等. 函数 面向对象 what ...
- 前端学习 第二弹: JavaScript中的一些函数与对象(1)
前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...
- web前端面试试题总结---javascript篇
JavaScript 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的 ...
- 前端开发面试题-JavaScript(转载)
本文由 本文的原作者markyun 收集总结. 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol ...
- JavaScript对象继承方式
一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Parent 构造函数 成为 Children 的方法, ...
- Javascript模拟继承(赠送.net吐槽一段)
首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...
- 详解Javascript的继承实现
我最早掌握的在js中实现继承的方法是在w3school学到的混合原型链和对象冒充的方法,在工作中,只要用到继承的时候,我都是用这个方法实现.它的实现简单,思路清晰:用对象冒充继承父类构造函数的属性,用 ...
随机推荐
- 吴裕雄--天生自然python Google深度学习框架:Tensorflow实现迁移学习
import glob import os.path import numpy as np import tensorflow as tf from tensorflow.python.platfor ...
- [原]调试实战——使用windbg调试崩溃在ComFriendlyWaitMtaThreadProc
原调试debugwindbgcrash崩溃COM 前言 这是几年前在项目中遇到的一个崩溃问题,崩溃在了ComFriendlyWaitMtaThreadProc()里,没有源码.耗费了我很大精力,最终通 ...
- 迅为iTOP-3399开发板Ubuntu基本设置
基于迅为iTOP3399开发板虚拟机需要根据用户的实际情况,进行网络设置以及其他一些基本的设置.VMware10.0.1 和 Vmware8.0.3 联网和基本设置类似.下面先详细讲解一下,虚拟机的一 ...
- rest framework-视图和路由-长期维护
############### 三种视图 ############### # 第一种方法:使用mixins # class AuthorView(mixins.ListModelMixin, ...
- LG_2967_[USACO09DEC]视频游戏的麻烦Video Game Troubles
题目描述 Farmer John's cows love their video games! FJ noticed that after playing these games that his c ...
- github简单操作
配置用户名: git config --global user.name 名.姓 配置用户邮件:git config --global user.email 名.姓@avatarmind.com 查看 ...
- JS替换变量中的文字字母
var text='Hello world, Hello world'; var b= text.replace('world','zhengxiaoya'); // 找到字符串中的第一个'world ...
- 吴裕雄--天生自然python学习笔记:python OpenCV 基本绘图
Open CV 提供了绘制直线.圆形.矩形等基本绘 图的功能 . Open CV 画直线的语法为: 在画布上添加文字的语法为 : 用 Open CV 绘制基本图形 以 OpenCV 基本绘图绘制各种图 ...
- 手撸XGBoost流程(未完成)
网上的一篇文章,讲的挺清楚的. XGBoost原理分析及实践 XGBoost的原理 xgboost原理--刘建平博客 要注意的地方: 1.预测值y(pred)和损失函数L(y,y(hat))中的y(h ...
- linux下使用过的命令总结(未整理完)
1.常用命令不需解释 ls\cd\cp\mv\pwd\file\vi\vim\cat 2.getconf LONG_BIT 终端返回32表示操作系统32位,返回64表示操作系统64位. 3.ifcon ...