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的模块化。

原文地址:https://www.cnblogs.com/jfen625/p/12180288.html

时间: 2024-11-06 17:49:09

ES6与ES5的继承的相关文章

es6 class的基础语法,es6 class继承/ es5 call继承描述/使用apply比较完美继承Array的方法 sort倒序排序console.table()表格生成

//基础语法function People(name,email){ name, email } class User{ constructor(name,email){ this.name = name; this.email = email; } getinfo(){ console.log(this.name); } static description(){ console.log('I am description --static'); } set urls(values){ con

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

和其它面向对象编程语言一样,ES6 正式定义了 class 类以及 extend 继承语法糖,并且支持静态.派生.抽象.迭代.单例等,而且根据 ES6 的新特性衍生出很多有趣的用法. 一.类的基本定义 基本所有面向对象的语言都支持类的封装与继承,那什么是类? 类是面向对象程序设计的基础,包含数据封装.数据操作以及传递消息的函数.类的实例称为对象. ES5 之前通过函数来模拟类的实现如下: // 构造函数 function Person(name) { this.name = name; } //

ES6转ES5:Gulp+Babel

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

es6转es5

一.在没有IDE情况下的转换 在"我的电脑->D盘”新建个文件夹es6,文件夹里新建一个文件es6.js. 打开命令行窗口 1.先全局安装babel-cli,输入命令 npm install babel-cli -g 2.输入 cd d:\es6 ; ---进入文件夹路径 3.输入 npm init: 一路回车键 ---(引导你创建一个package.json文件,包括名称.版本.作者这些信息等) 4.输入 npm install --save-dev babel-cli: ---(安装命

Babel 转码器 &#167; es6转换es5

Babel 转码器 § es6转换es5 实时转码 /  Repl  -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc 1.Babel 的配置文件是.babelrc,存放在项目的根目录下.使用 Babel 的第一步,就是配置这个文件. 该文件用来设置转码规则和插件,基本格式如下. { "presets": [], "plugins": [] } 2.presets字段设定转码规则,官方

ES6中的CLASS继承

ES6中的CLASS继承:https://www.jianshu.com/p/3d3d52b47762 es6 javascript的Class 类的继承:https://blog.csdn.net/qq_30100043/article/details/53542531 原文地址:https://www.cnblogs.com/bydzhangxiaowei/p/9911208.html

ECMAScript6转码器,ES6转ES5

现在越来越多的前端开始关注ES6,也有一部分人开始用ECMAScript 6,但是ES6的一些新的特性并不被低版本的浏览器支持. 所以这次就分享一个ES6转ES5的方法. 一.首先建立一个文件夹,然后里面创建.babelrc文件 有时候这个文件创建不了的,可以从别处复制过来 .babelrc文件的内容填写如下: {"presets": [],"plugins": []}.babelrc的后期修改需要手动填写. 二.npm init来初始化项目(一路回车就可以有yes

webpack实现es6转es5

Webpack实现es6转换为es5 安装插件 npm install --save-dev babel-loader @babel/core @babel/preset-env 配置 在webpack.config.js中的module的rules中,添加一条新的loader { test: /\.js/, //babel转化es6到es5 exclude: /node_modules/, use: { loader: "babel-loader", options: { prese

面向对象JS ES5/ES6 类的书写 继承的实现 new关键字执行 this指向 原型链

一 .什么是面向对象? 面向对象(Object Oriented),简写OO,是一种软件开发方法. 面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物. 面向对象的概念和应用已超越了程序设计和软件开发,扩展到如数据库系统.交互式界面.应用结构.应用平台.分布式系统.网络管理结构.CAD技术.人工智能等领域. 面向对象是相对于面向过程来讲的,面向对象方法,把相关的数据和方法组织为一个整体来看待,从更高的层次来进行系统建模,更贴近事物的自然运行模式. 编程范式 一般可以