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的继承的更多相关文章

  1. ES6中的类继承和ES5中的继承模式详解

    1.ES5中的继承模式 我们先看ES5中的继承. 既然要实现继承,首先我们得要有一个父类. Animal.prototype.eat = function(food) { console.log(th ...

  2. ES5的继承和ES6的继承有什么区别?让Babel来告诉你

    如果以前问我ES5的继承和ES6的继承有什么区别,我一定会自信的说没有区别,不过是语法糖而已,充其量也就是写法有区别,但是现在我会假装思考一下,然后说虽然只是语法糖,但也是有点小区别的,那么具体有什么 ...

  3. 【ES6】更易于继承的类语法

    和其它面向对象编程语言一样,ES6 正式定义了 class 类以及 extend 继承语法糖,并且支持静态.派生.抽象.迭代.单例等,而且根据 ES6 的新特性衍生出很多有趣的用法. 一.类的基本定义 ...

  4. ES6 | 关于class类 继承总结

    子类必须在constructor方法中调用super方法,否则新建实例时会报错.这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工.如果不调用super方法,子类就得不到 ...

  5. JavaScript之ES5的继承

    自从有了ES6的继承后,ES5的继承也退出了舞台,在实际开发也不会用得着: 先看看ES6的继承 class Father{ constructor(a){ console.log(a); } play ...

  6. es6转es5

    一.在没有IDE情况下的转换 在"我的电脑->D盘”新建个文件夹es6,文件夹里新建一个文件es6.js. 打开命令行窗口 1.先全局安装babel-cli,输入命令 npm inst ...

  7. webpack es6 to es5支持配置

    1. 安装webpack npm install webpack --save-dev 2. 安装babel  实现 ES6 到 ES5 npm install --save-dev babel-co ...

  8. ES6转ES5:Gulp+Babel

    目标: ES6代码转成ES5 对转换后的ES5进行压缩 以上步骤自动监控执行 步骤: 1.安装插件 在命令行中定位到项目根目录 安装全局 Gulp npm install -g gulp 安装项目中使 ...

  9. Babel 转码器 § es6转换es5

    Babel 转码器 § es6转换es5 实时转码 /  Repl  -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc ...

随机推荐

  1. 笔记||Pyhton3进阶之多线程原理

    # 多线程 # 一个进程相当于一个或多个线程 # 当没有多线程编程时,一个进程也是一个主线程 # 但有多线程编程时,一个进程包含多个线程,包括主线程 # 使用线程 可以实现程序的并发 # python ...

  2. 最全Redis面试题

    1.什么是Redis? 2.Redis相比memcached有哪些优势? 3.Redis支持哪几种数据类型? 4.Redis主要消耗什么物理资源? 5.Redis的全称是什么? 6.Redis有哪几种 ...

  3. 【快学springboot】5.全局异常捕获,异常流处理业务逻辑

    前言 上一篇文章说到,参数校验,往往需要和全局的异常拦截器来配套使用,使得返回的数据结构永远是保持一致的.参数异常springboot默认的返回结构: { "timestamp": ...

  4. 精易四周年限量纪念U盘(全套)

    下载地址网盘:https://pan.baidu.com/s/1dFwPbiT

  5. 第2节 storm实时看板案例:11、实时看板综合案例工程构建,redis的专业术语

    redis当中的一些专业术语: redis缓存击穿 redis缓存雪崩 redis的缓存淘汰 =========================================== 详见代码

  6. 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 ~ ...

  7. 如何将文件压缩成.tar.gz格式的文件

    1.下载“7-ZIP“这个软件 2.安装7-ZIP以后,直接在你想要打包的文件上点右键菜单,会有一个7-ZIP的子菜单栏,类似WinRAR和WinZIP的那种右键菜单.然后选“7-ZIP”->“ ...

  8. CF6

    A A 不解释 #include<bits/stdc++.h> using namespace std; namespace red{ inline int read() { int x= ...

  9. xcode 6 如何将 模拟器(simulator) for iphone/ipad 转变成 simulator for iphone

    xcode 6默认模拟器是iphone/ipad通用的,如果想只针对iphone或者ipad可以进行如下设置: 1.修改模拟器大小(非必须) 模拟器->WIndow->scale-> ...

  10. PHP 附录 : 用户注册与登录完整代码

    login.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...