(ES6)JavaScript中面向对象类的实现

时间:2019-12-16
本文章向大家介绍(ES6)JavaScript中面向对象类的实现,主要包括(ES6)JavaScript中面向对象类的实现使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

在ES5中,我们就知道JS是不支持面向对象的,所以用函数模拟了一个构造函数来实现类的。那么在ES6中,在ES5的原理基础上,将代码书写更为简单,明了。

一、怎样用ES6创建类?首先看一看例子:

 class Student { 
          constructor(name, age) {
             this.name = name;
             this.age = age;
         }
     sleep(){console.log(`xx在xx睡觉`);
     };
 }
let s = new Student("ax", 23);
  console.log(s);

这里出现了关键词“class”,之后的Student为类的标识符,使用大驼峰命名法。这是类模板。

constructor()是类中必须存在的构造函数,若没有书写则会默认有一个空构造。在小括号内是类的参数,只要觉得有必要写入的参数都可以写。这是构造器。

二、new:new关键字,调用类。调用类时发生了什么?(这是面试常考题)

1、创建一个空的新对象
var obj = {};
2、将该对象的_proto_(隐式原型)指向创建该对象的类的原型对象
假设类叫做A,obj._proto_ = A.prototype
3、将构造函数环境中的this,指向该对象,执行构造函数中的代码
this = obj;(代码错误,理解环境)
4、返回刚刚的创建的新对象

三、在类中,常用get—set属性,获取和设置属性值,是可控的手段

例子
class Circle {
            constructor(left, top, r) {
                this.createNode(); //在类中调用创建节点
                this.left = left;
                this.top = top;
                this.r = r;
                this.appendToPage(); //将节点放入页面
            }
            createNode() {
                const div = document.createElement("div"); //创建节点,放入div变量
                this.node = div; //类的节点为div
            };
            appendToPage() {
                document.body.appendChild(this.node);
            }
            get left() {
                return this.left + this.r;
            }
            set left(value) {
                this.node.style.left = value - this.r + "px"; //将圆心设为点
            }
            get top() {
                return this.top + this.r;
            }
            set top(value) {
                this.node.style.top = value - this.r + "px";
            }
            get r() {
                return this.noed.offsetWidth / 2 + "px";
            }
            set r(value) {
                
            }
        }

创建一个圆圈类,其中的位置和半径都用get-set属性设置,他们为一对使用。get()为调用,set()为更改属性值(有参数)。当我们操作实例对象的get set属性时,就相当于在不断的调用对应的get—set方法。

四、类的三大特征

(1)封装

隐藏内部细节,不暴露在外面;即,信息的隐藏。不关心具体怎样实现的,只需要知道能达到效果就行了

(2)继承

子类继承父类的“所有”属性和方法,并且拥有自己的属性和方法
不能指向性继承

【extends 扩展】
从子类,扩展到父类,即继承父类

【super 超类】

继承父类,只能写在子类第一行中,并且只能写一次

class Person{
            constructor(name,age,gender){
                this.name = name;
                this.age = age;
                this.gender = gender;
            }
        }
        class Student extends Person{//学生类 扩展 至人类=>即 继承
            constructor(name,age,gender,grade){
                super(name,age,gender)//超类(父类),调用父亲的构造,实现父亲构造的继承
                this.grade = grade;//用继承省去部分重复的
            }
 }

(3)多态

相同的行为,不同的、多种的实现,传的参数不一样,决定了实现方法不一样。

【重载】

JS自带,参数的不同,实现不同。通过if判断参数表

【重写】

父亲的行为,儿子重写一个,覆盖父亲的

例子:

创建图形类,三角形类为图形类的儿子,使用extends继承;三角形类有父亲没有的特性,因此创建createNode方法重写。

class Graph {
            constructor(color, left, top) {
                this.color = color;
                this.left = left;
                this.top = top;
                this.node = null; //没有创建图形时,图形节点为空,之后重新赋值
            }
        }


        //三角形
        class Triangle extends Graph {//继承
            constructor(color, left, top, bottom, height) {
                super(color, left, top)
                this.bottom = bottom;
                this.height = height;
                this.init();
            }
            createNode() { //oo重写
                this.node = document.createElement("p");
                // this.node.style.backgroundColor = this.color;
                this.node.style.left = this.left + "px";
                this.node.style.top = this.top + "px";
                this.node.style.borderBottom = this.height + "px" + " solid " + this.color;
                this.node.style.borderLeft = this.bottom / 2 + "px" + " solid transparent";
                this.node.style.borderRight = this.bottom / 2 + "px" + " solid transparent";
            }
        }

以上就是ES6的类的创建和使用。

原文地址:https://www.cnblogs.com/yuanjunjundebo/p/12049624.html