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 ...
随机推荐
- Centos7 nginx配置多虚拟主机过程
一.前提准备 1.已经安装好了的Centos7服务器 2.ip 为192.168.1.209 [本次的配置ip] 3.确定防火墙等已经关闭 二.nignx配置文件参数详解 要配置多台虚拟主机,就需 ...
- gcc/g++/make/cmake/makefile/cmakelists的恩恩怨怨
以前在windows下用VS写代码,不管有多少个文件夹,有多少个文件,写完以后只需要一键就什么都搞定了.但是当移步linux下时,除非你使用图形界面,并且使用Qt creater这类的IDE时,才可以 ...
- 本周总结(19年暑假)—— Part7
日期:2019.8.25 博客期:113 星期日
- Design and History FAQ for Python3
Source : Design and History FAQ for Python3 Why is there no goto? 你可以通过异常来获得一个可以跨函数调用的 "goto 结构 ...
- js面试代码中的“坑”
1.typeof 对类型的判断 (function() { return typeof arguments; } )(); 答案:"Object" 解释:arguments是一个伪 ...
- There is no Action mapped for action name hello.
- 「NOIP2015」运输计划
传送门 Luogu 解题思路 首先这题可以直接二分答案,然后我们每次都把属于长度大于二分值的路径上的边标记一次,表示选这条边可以优化几条路径. 然后我们显然是要选一条覆盖次数等于需要覆盖的路径数并且长 ...
- 本地模拟内存溢出并分析Dump文件
java Dump文件分析 前言 dump文件是java虚拟机内存在某一时间点的快照文件,一般是.hprof文件,下面自己模拟一下本地内存溢出,生成dump文件,然后通过mat工具分析的过程. 配置虚 ...
- java文件相关(文件追加内容、文件内容清空、文件内容读取)
https://blog.csdn.net/xnz0616/article/details/39137177 1.文件内容追加 // 在已有的文件后面追加信息 public static void a ...
- Java项目xml相关配置
一.web.xml //设置会话过期时间,这里单位是分钟 <session-config> <session-timeout>30</session-timeout> ...