美文网首页简友广场
33 ES6中的类和对象

33 ES6中的类和对象

作者: CurryCoder | 来源:发表于2020-06-01 22:56 被阅读0次

技术交流QQ群:1027579432,欢迎你的加入!

欢迎关注我的微信公众号:CurryCoder的程序人生

1.面向对象

  • 面向对象的思维特点:
    • a.抽取(抽象)对象共有的属性和行为组织(封装)成一个类(模板);
    • b.对类进行实例化,获取类的对象;
  • 面向对象编程考虑的是有哪些对象,按照面向对象的思维特点,不断的创建对象,使用对象,指挥对象做事情。

2.对象

  • 现实生活中,万物皆对象,对象是一个具体的事物,看得见摸得着的事物。
  • 在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象。例如:字符串、数值、数组、函数等。
  • 对象是由属性和方法组成
    • 属性:事物的特征,在对象中用属性来表示(常用名词);
    • 方法:事物的行为,在对象中用方法来表示(常用动词);

3.类class

  • 在ES6中新增了类的概念,可以使用class关键字声明一个类,之后以这个类来实例化对象。
  • 类是抽象了对象的公共部分,它泛指某一大类;对象特指某一个,通过类实例化出来的一个具体的对象。

4.创建类

  • 语法:
    class 类名{
        // class body
    }
    
  • 创建实例:
    var xx = new 类名();
    
  • 注意:类必须使用new实例化对象

5.类constructor构造函数

  • constuctor()方法是类的构造函数(默认方法),用于传递参数,返回实例对象,通过new命令生成对象实例时,自动调用该方法。如果没有显示定义,类内部就会自动为我们创建一个constructor()。
  • 注意
    • 通过class关键字创建类,类名习惯性定义首字母大写;
    • 类里面有个constructor函数,可以接收传递过来的参数,同时返回实例对象;
    • constructor函数只要new生成实例时,就会自动调用这个函数,如果我们不写这个函数,类也会自动生成这个函数;
    • 生成实例new不能省略;
    • 注意语法规范,创建类,类名后不加小括号;生成实例,类名后加小括号;构造函数不需要加function。

6.类添加方法

  • 语法:
    class Star {
        // 构造函数
        constructor(uname, age) {
            this.uname  = uname;  
            this.age = age;
        }
        // 方法
        sing(){
            console.log('我正在唱歌...');
        }
    }
    
  • 注意
    • 类中的所有方法都不要写function;
    • 多个方法之间不需要添加逗号分隔;

7.类的继承

  • 程序中的继承:子类可以继承父类的一些属性和方法。
    class Father{
        constructor(){
    
        }
    
        money(){
            console.log(100);
        }
    }
    // 继承
    class Son extends Father{
    
    }
    
    var son = new Son();
    son.money(); 
    

8.super关键字

  • super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数。
  • 就近原则(继承中属性或方法的查找原则):
    • 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的方法;
    • 继承中,如果子类中没有这个方法,就去查找父类中有没有这个方法。如果有,就执行父类的这个方法;
  • 语法
    class Son extends Father{
        constructor(x, y) {
            // super必须在子类this之前调用!
            super(x, y);
            this.x = x;
            this.y = y;
            // 利用super调用父类的构造函数
            
        }
        // 子类独有的方法
        subtract(){
            console.log(this.x - this.y);
        }
    }
    
    var son = new Son(5, 4);
    son.subtract();
    son.sum();
    
  • 注意:子类在构造函数中使用super,必须要放到this之前(必须先调用父类的构造函数,再使用子类的构造函数)

9.三个注意点

  • ES6中类没有变量提升,所以必须先定义类,才能通过类实例出对象;
  • 类中的共有的属性和方法一定要加this使用;
  • 类中的this指向问题;
    • constructor中的this指向的是实例对象;
    • 方法中的this指向这个方法的调用者;

10.资料下载

相关文章

  • 33 ES6中的类和对象

    技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1....

  • 面向对象(ES5与ES6类的继承解析)

    面向对象的语言都有一个类的概念,通过类可以创建多个具有相同方法和属性的对象,ES6之前并没有类的概念,在ES6中引...

  • Array.from()

    Array.from()是ES6中新增的方法,可以将两类对象转为真正的数组:类数组对象和可遍历(iterable)...

  • day06-前端面试技巧-(面向对象)

    类与实例: 类的声明es5: es6中class的声明 生成实例实例类的对象(es5和es6的实例化方式是一样的)...

  • Symbol.iterator

    es6中有三类结构生来就具有Iterator接口:数组、类数组对象、Map和Set结构。 至于对象没有布置iter...

  • JavaScript-13 ES6和对象

    ES6类和对象 在ES6之前如果定义一个类? 通过构造函数来定义一个类 在ES6之前定义类就是构造函数,静态属性和...

  • TypeScript的类

    1. 类的定义 TypeScript中的类和ES6中类的定义类似,但是也有区别 对象属性设置的时候需要在后面打上...

  • ES6中定义类.继承以及对象和数组的操作0712

    ES6中定义类.继承以及对象的操作0712 1.定义类的不同 回顾一下以前学习的在ES6之前定义一个类(不明显,和...

  • 深入理解ES6中class的this指向

    在ES6中,引入了类似其他语言的类的写法:即class(类),作为类对象模板。ES6 的class可以看作一个语法...

  • 浅析js class

    在 ES6 规范中,引入了 class 的概念。使得 JS 开发者终于告别了,直接使用原型对象模仿面向对象中的类和...

网友评论

    本文标题:33 ES6中的类和对象

    本文链接:https://www.haomeiwen.com/subject/bswezhtx.html