ES6与ES5的继承
ES6
ES6中的类
类与ES5中的构造函数写法类似
区别在于属性要放入constructor中,静态方法和属性实列不会继承
<script>
class Person{
height="178cm";
constructor(name,age){
//属性
this.name = name;
this.age = age;
}
//方法
getName(){
console.log("姓名是:"+this.name);
}
//静态方法
static hobby(){
console.log("喜欢篮球");
}
}
//静态属性
Person.height = "178cm"; let student = new Person("张三",20);
student.getName();
//通过类来调用
Person.hobby();
console.log(Person.height);
</script>
类的继承
子类与父类不会相互影响
<script>
class Dad{
name = "张三";
age = 40;
constructor(height,age){//多个参数 “,” 号处理
this.height = height;
}
hobby(){
console.log("父类爱好");
}
} class Son extends Dad{
constructor(height,age){
//表示调用父类的构造函数
super(height);
}
hobby(){
super.hobby();
console.log("子类爱好")
}
}
</script>
ES5
在ES5中要想实现构造函数的继承我们需要先了解三个函数:call(),apply(),bind()
这三个函数是用来改变this的指向。听不懂没关系,我们来看个例子就明白。
<script>
// function foo(){
// console.log(this);
// }
// foo();//这里的this指向window
// let obj = {
// name:"张三"
// }
// foo.call(obj);//这里就会将foo的this指向obj //以下是三个函数间的差别
function foo(name,age){
console.log(this,"姓名是"+name+"年龄是"+age);
}
// foo();
let obj = {
name:"张三"
}
// foo.call(obj,"张三",20);//第一个是改变this的指向,之后的是函数本身需要传递的参数
// foo.apply(obj,["张三",20]);//apply不同的是参数传入只接受一个数字
foo.bind(obj)("张三",20);//需要再执行一遍,参数放入第二个()内
</script>
构造函数的继承
继承:子类继承父类所有属性和行为,父类不受影响。
目的:找到类之间的共性,精简代码,提高代码复用性,保持父类纯洁性
<script>
//继承;
function Dad(name,age){
this.name = name;
this.age = age;
this.money = "100000"
} function Son(name,age){
Dad.call(this,name,age);
// Dad.apply(this,[name,age]);
// Dad.bind(this)(name,age);
this.sex = '男'
} let zhangsan = new Son("张三",20);
console.log(zhangsan.money);
console.log(zhangsan.sex);
</script>
原型的继承
我们的原型prototype 继承不能够简单的用=进行,因为涉及到传值和传址的问题。
传值和传址问题(简单数据类型传值,复杂数据类型传址)
- 基本数据类型:Number、String、Boolean、Null、Undefined
- 复杂数据类型:Array、Date、Math、RegExp、Object、Function等
为了解决这个问题,我们有两种解决方式
1.深拷贝继承
2.组合继承
<script>
//递归深拷贝
function deepCopy(obj){
let newObj = Array.isArray(obj)?[]:{};//判断对象是否是个数组
for(let key in obj){
if(obj.hasOwnProperty(key)){//只拿对象本身的属性
if(typeof obj[key] === "object"){//若为对象,即复杂数据类型
newObj[key] = deepCopy(obj[key]);//进一步循环
}else{
newObj[key] = obj[key]
}
}
}
return newObj;
}
</script>
<script>
//组合继承
function Dad(){
this.name = "张三";
}
Dad.prototype.hobby = function(){
console.log("喜欢篮球");
}
function Son(){
Dad.call(this);
}
let F = function(){}//中间函数,空的构造函数
F.prototype = Dad.prototype;
Son.prototype = new F();
Son.prototype.constructor = Son; let newSon = new Son();
newSon.hobby();
</script>
ES6与ES5的继承的更多相关文章
- ES6中的类继承和ES5中的继承模式详解
1.ES5中的继承模式 我们先看ES5中的继承. 既然要实现继承,首先我们得要有一个父类. Animal.prototype.eat = function(food) { console.log(th ...
- ES5的继承和ES6的继承有什么区别?让Babel来告诉你
如果以前问我ES5的继承和ES6的继承有什么区别,我一定会自信的说没有区别,不过是语法糖而已,充其量也就是写法有区别,但是现在我会假装思考一下,然后说虽然只是语法糖,但也是有点小区别的,那么具体有什么 ...
- 【ES6】更易于继承的类语法
和其它面向对象编程语言一样,ES6 正式定义了 class 类以及 extend 继承语法糖,并且支持静态.派生.抽象.迭代.单例等,而且根据 ES6 的新特性衍生出很多有趣的用法. 一.类的基本定义 ...
- ES6 | 关于class类 继承总结
子类必须在constructor方法中调用super方法,否则新建实例时会报错.这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工.如果不调用super方法,子类就得不到 ...
- JavaScript之ES5的继承
自从有了ES6的继承后,ES5的继承也退出了舞台,在实际开发也不会用得着: 先看看ES6的继承 class Father{ constructor(a){ console.log(a); } play ...
- es6转es5
一.在没有IDE情况下的转换 在"我的电脑->D盘”新建个文件夹es6,文件夹里新建一个文件es6.js. 打开命令行窗口 1.先全局安装babel-cli,输入命令 npm inst ...
- webpack es6 to es5支持配置
1. 安装webpack npm install webpack --save-dev 2. 安装babel 实现 ES6 到 ES5 npm install --save-dev babel-co ...
- ES6转ES5:Gulp+Babel
目标: ES6代码转成ES5 对转换后的ES5进行压缩 以上步骤自动监控执行 步骤: 1.安装插件 在命令行中定位到项目根目录 安装全局 Gulp npm install -g gulp 安装项目中使 ...
- Babel 转码器 § es6转换es5
Babel 转码器 § es6转换es5 实时转码 / Repl -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc ...
随机推荐
- 笔记||Pyhton3进阶之多线程原理
# 多线程 # 一个进程相当于一个或多个线程 # 当没有多线程编程时,一个进程也是一个主线程 # 但有多线程编程时,一个进程包含多个线程,包括主线程 # 使用线程 可以实现程序的并发 # python ...
- 最全Redis面试题
1.什么是Redis? 2.Redis相比memcached有哪些优势? 3.Redis支持哪几种数据类型? 4.Redis主要消耗什么物理资源? 5.Redis的全称是什么? 6.Redis有哪几种 ...
- 【快学springboot】5.全局异常捕获,异常流处理业务逻辑
前言 上一篇文章说到,参数校验,往往需要和全局的异常拦截器来配套使用,使得返回的数据结构永远是保持一致的.参数异常springboot默认的返回结构: { "timestamp": ...
- 精易四周年限量纪念U盘(全套)
下载地址网盘:https://pan.baidu.com/s/1dFwPbiT
- 第2节 storm实时看板案例:11、实时看板综合案例工程构建,redis的专业术语
redis当中的一些专业术语: redis缓存击穿 redis缓存雪崩 redis的缓存淘汰 =========================================== 详见代码
- Linux centos7 shell特殊符号、cut命令、sort_wc_uniq命令、tee_tr_split命令、shell特殊符号
一.shell特殊符号.cut命令 *任意字符 [root@davery ~]# ls /tmp/*.txt/tmp/1.txt /tmp/2.txt /tmp/q.txt[root@davery ~ ...
- 如何将文件压缩成.tar.gz格式的文件
1.下载“7-ZIP“这个软件 2.安装7-ZIP以后,直接在你想要打包的文件上点右键菜单,会有一个7-ZIP的子菜单栏,类似WinRAR和WinZIP的那种右键菜单.然后选“7-ZIP”->“ ...
- CF6
A A 不解释 #include<bits/stdc++.h> using namespace std; namespace red{ inline int read() { int x= ...
- xcode 6 如何将 模拟器(simulator) for iphone/ipad 转变成 simulator for iphone
xcode 6默认模拟器是iphone/ipad通用的,如果想只针对iphone或者ipad可以进行如下设置: 1.修改模拟器大小(非必须) 模拟器->WIndow->scale-> ...
- PHP 附录 : 用户注册与登录完整代码
login.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...