ES6中的基础学习与代码示例

最新推荐文章于 2022-07-28 14:55:04 发布

西西可里大盗

最新推荐文章于 2022-07-28 14:55:04 发布

阅读量206

点赞数

分类专栏： Javascript 文章标签： javascript es6

本文链接：https://blog.csdn.net/zzxhahaha/article/details/110131149

版权

Javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

提示：大家一起交流

文章目录

前言
一、js面向对象
二、构造函数
总结

前言

提示：以下是本篇文章正文内容，下面案例可供参考

对象就有__proto__ 和prototype

一、js面向对象

1：面向过程

在这里插入图片描述

一步一步的来，紧密联系，柔性差
在这里插入图片描述

2：面向对象

什么是面向对象？
解释：把事物分解成不同的对象，不同对象之间分工合作。
eg：时钟的针分秒指针可以看作不同的对象分工合作。

在这里插入图片描述
特点：封装性（直接用），继承性（继承功能)，多态性（还可以有其他功能）
性能底

3：类和对象

关系：对象：一组无序的相关属性与方法的集合。
类：抽取对象的共用属性和行为成一个类。
在这里插入图片描述

4：实例

4-1：创建类和实例

<script>
        // 1. 创建类 class  创建一个 明星类
        class Star {
            constructor(uname, age,like) {
                this.uname1 = uname;
                this.age2 = age;
                this.like= like;
            }
        }
//uname ，age1 是有参数赋值的 后面的是实例化带的
        // 2. 利用类创建对象 new  来实例化 
        var ldh = new Star('刘德华', 18,'拍电影');
        var zxy = new Star('张学友', 20,'唱歌');
        console.log(ldh);
        console.log(zxy);
        //(1) 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写
        //(2) 类里面有个constructor 函数,可以接受传递过来的参数,--同时返回实例对象不需要return
        //(3) constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数
        //(4) 生成实例 new 不能省略
        //(5) 最后注意语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function
    </script>

4-2 类中添加方法

 <script>
        // 1. 创建类 class  创建一个 明星类
        class Star {
            // 类的共有属性放到 constructor 里面
            constructor(uname, age) {
                this.uname = uname;
                this.age = age;
            }
            //函数之间不要加‘，’
            //不需要创建function
            sing(song) {
                // console.log('我唱歌');
                console.log(this.uname + song);

            }
        }

        // 2. 利用类创建对象 new
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 20);
        console.log(ldh);
        console.log(zxy);
        // (1) 我们类里面所有的函数不需要写function 
        //(2) 多个函数方法之间不需要添加逗号分隔
        ldh.sing('冰雨');
        zxy.sing('李香兰');
    </script>

4-3: 类的继承

 class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                //this.xx是函数自己的对象来自于 参数 x，y ，this指的是 father
            }
            sum() {
                console.log(this.x * this.y);

            }
        }
        class Son extends Father {
            constructor(x, y) {
                super(x, y); //调用了父类中的构造函数。 xy传递给了父亲
            }
        }
        //super 调用父亲构造函数
        var son = new Son(1, 2);
        //2,
        var son1 = new Son(11, 22);
        // 11*22
        son.sum();
        son1.sum();

4-4 super

 // super 关键字调用父类普通函数
        class Father {
            say() {
                return '我是爸爸';
            }
        }
        class Son extends Father {
            say() {
                // console.log('我是儿子');
                console.log(super.say() + '的儿子');
                // super.say() 就是调用父类中的普通函数 say()
            }
        }
        var son = new Son();
        son.say();
        // 继承中的属性或者方法查找原则: 就近原则
        // 1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
        // 2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)
    </script>

4-5 继承与拓展

 // 父类有加法方法
        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);
            }
        }
        //x+y
        // 子类继承父类加法方法 同时 扩展减法方法
        class Son extends Father {
            constructor(x, y) {
                // 利用super 调用父类的构造函数
                // super 必须在子类this之前调用 
                // 使用父亲的函数 先super方法传递给父类
                super(x, y);//先
                this.x = x;//后
                this.y = y;

            }
            subtract() {
                console.log(this.x - this.y);

            }
        }
        var son = new Son(5, 3);
        son.subtract();

4-6 this 指向

<body>
    <button>点击</button>
    <script>
        var that;
        var _that;
        class Star {
            constructor(uname, age) {
                //传递的参数不需要加this
                // constructor 里面的this 指向的是 创建的实例对象 --刘德华
                //that 是外面的this
                that = this;
                console.log(this);

                this.uname = uname;
                this.age = age;
                // this.sing();
                this.btn = document.querySelector('button');//this=刘德华的btn
                this.btn.onclick = this.sing;//this=刘德华 点击了执行函数song 不能加（）不然立马调用。我们需要点击调用。 btn调用了这个方法 this=btn
                
            }
            sing() {
                // 这个sing方法里面的this 指向的是 btn 这个按钮,因为这个按钮调用了这个函数
                console.log(this);
                //结果：this =实例化对象。

                console.log(that.uname); // that里面存储的是constructor里面的this
            }
            dance() {
                // 这个dance里面的this 指向的是实例对象 ldh 因为ldh 调用了这个函数
                _that = this;
                console.log(this);

            }
        }

        var ldh = new Star('刘德华');
        // console.log(that === ldh); true that=this=ldh这个对象
        ldh.dance();
        console.log(_that === ldh); //true this 调用者

        // 1. 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象

        // 2. 类里面的共有的属性和方法一定要加this使用.
    </script>

二、构造函数

2-1 静态成员和实例成员

在这里插入图片描述

代码如下（示例）：

<script>
        // 构造函数中的属性和方法我们称为成员, 成员可以添加
        function FN(uname, age) {
            this.uname = uname;
            this.age = age;
            this.sing = function() {
                console.log('我会唱歌');

            }
        }
        var A = new FN('111', 18);
        // 1.实例成员就是构造函数内部通过this添加的成员 *uname age sing* 就是实例成员
        // 实例成员只能通过实例化的对象来访问
        console.log(A.uname);
        A.sing();
        // console.log(FN.uname); // 不可以通过构造函数来访问实例成员
        // 2. 静态成员 在构造函数本身上添加的成员  sex 就是静态成员
        FN.sex = '男';
        // 静态成员只能通过构造函数来访问
        console.log(FN.sex);
        console.log(A.sex); // 不能通过对象来访问
    </script>

2-2 构造函数存在的问题

浪费内存
在这里插入图片描述

2-3 原型对象与对象原型

原型对象：prototype 指向另一个对象
构造函数有个属性—有原型对象 —prototype ----prototype的所有的属性和方法都会被这个函数使用。
在这里插入图片描述

对象原型__proto__
在这里插入图片描述

<script>
        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        Star.prototype.sing = function() {
            console.log('我会唱歌');
        }
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 19);
        ldh.sing();
        console.log(ldh); // 对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象 prototype
        console.log(ldh.__proto__ === Star.prototype);
        // 方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing
        // 如果么有sing 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法
    </script>

在这里插入图片描述

constructor 指向原来的构造函数。

<script>
        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        // 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数
        // Star.prototype.sing = function() {
        //     console.log('我会唱歌');
        // };
        // Star.prototype.movie = function() {
        //     console.log('我会演电影');
        // }
        Star.prototype = {
            // 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
            constructor: Star,
            
            sing: function() {
                console.log('我会唱歌');
            },
            movie: function() {
                console.log('我会演电影');
            }
        }
        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 19);
        console.log(Star.prototype);
        console.log(ldh.__proto__);
        console.log(Star.prototype.constructor);
        console.log(ldh.__proto__.constructor);
    </script>

prototype对象对一个对象占用了,constructor 就没有了，不能指挥原来的函数，这个时候就需要手动添加。
在这里插入图片描述

{
            // 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
            // constructor: Star,
            sing: function() {
                console.log('我会唱歌');
            },
            movie: function() {
                console.log('我会演电影');
            }
        }

2-4 原型链

在这里插入图片描述

  <script>
        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        Star.prototype.sing = function() {
            console.log('我会唱歌');
        }
        var ldh = new Star('刘德华', 18);
        // 1. 只要是对象就有__proto__ 原型, 指向原型对象
        console.log(Star.prototype);
        console.log(Star.prototype.__proto__ === Object.prototype);
        // 2.我们Star原型对象里面的__proto__原型指向的是 Object.prototype
        console.log(Object.prototype.__proto__);
        // 3. 我们Object.prototype原型对象里面的__proto__原型  指向为 null
    </script>

三：继承

3-1 call（）方法

fun.call(thisArg, arg1, arg2, …)
thisArg ：当前调用函数 this 的指向对象
arg1，arg2：传递的其他参数

     // call 方法
        function fn(x, y) {
            console.log('我想喝手磨咖啡');
            console.log(this);
            console.log(x + y);
//fn函数中的属性和方法。

        }
        var o = {
            name: 'andy'
        };
        // fn();
        // 1. call() 可以调用函数
        // fn.call();
        // 2. call() 可以改变这个函数的this指向 此时这个函数的this 就指向了o这个对象
        fn.call(o, 1, 2);

在这里插入图片描述

<script>
        // 借用父构造函数继承属性
        // 1. 父构造函数
        function Father(uname, age) {
            // this 指向父构造函数的对象实例
            this.uname = uname;
            this.age = age;
        }
        // 2 .子构造函数 
        function Son(uname, age, score) {
            // this 指向子构造函数的对象实例  
            Father.call(this, uname, age);
            this.score = score;
        }
        var son = new Son('刘德华', 18, 100);
        console.log(son);
    </script>

在这里插入图片描述

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

西西可里大盗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
ES6中的基础学习与代码示例

提示：大家一起交流文章目录前言一、js面向对象1：面向过程2：面向对象3：类和对象4：实例4-1：创建类和实例4-2 类中添加方法4-3: 类的继承4-4 super4-5 继承与拓展二、使用步骤1.引2.读入数据总结前言提示：以下是本篇文章正文内容，下面案例可供参考一、js面向对象1：面向过程一步一步的来，紧密联系，柔性差2：面向对象什么是面向对象？解释：把事物分解成不同的对象，不同对象之间分工合作。eg：时钟的针分秒指针可以看作不同的对象分工合作。特点：
复制链接

扫一扫