ES6-class

作者: hunter97 | 来源:发表于2020-11-09 11:26 被阅读0次

ES6提供了更接近传统语言的写法,引入了class(类)这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加通俗易懂。class为构造函数的语法糖,即class的本质是构造函数。class的继承extends本质为构造函数的原型链的继承。

一 . 构造函数

constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。

class king {
  constructor(name) {
    this.name=name;
  }
  run(){
    console.log(this.name);
  }
}
let num1 = new king("大王");
num1.run();
二. 继承

class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。

class Animal {
  constructor(){
    this.type = 'animal'
  }
  says(say){
    console.log(this.type + ' says ' + say)
  }
}
let animal = new Animal();
animal.says('hello');  //输出:animal says hello

class Cat extends Animal {
  constructor(){
    super();
    this.type = 'cat';
  }
}
let cat = new Cat();
cat.says('hello') ;  //输出:cat says hello
三. 示例
  1. 原始构造函数
// 父类
function User(name, age) {
  this.name = name;
  this.age = age;
}
// 原型方法
User.prototype.changName = function (name) {
  this.name = name;
};
User.prototype.changAge = function (age) {
  this.age = age;
};
//  静态方法
User.getName = function () {
    return "User";
};
// 取值方法
Object.defineProperty(User.prototype, "info", {
  get() {
    return "name:" + this.name + " | age:" + this.age;
  },
});

var user = new User("cuiht", 23);
console.log(user);

// 子类
function Manager(name, age, passWord) {
  User.call(this, name, age);
  this.passWord = passWord;
}
// 继承父类静态方法
Manager._proto_ = User;
// 继承父类 prototype 原型方法
Manager.prototype = User.prototype;
// 添加新方法
Manager.prototype.changPassWord = function (passWord) {
  this.passWord = passWord;
};

var manager = new Manager("cuiht", 23, "123456");
manager.changName("hunter");
console.log(manager);
  1. class类
// 父类
class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    // 原型方法
    changName (name) {
        this.name = name;
    };
    changAge (age) {
        this.age = age;
    };
    // 静态方法
    static getName(){
        return "User";
    }
    // 取值方法
    get info(){
        return "name:" + this.name + " | age:" + this.age;
    }
}

var user = new User("cuiht", 23);
console.log(user);

class Manager extends User{
    constructor(name,age,passWord){
        super(name,age);
        this.passWord = passWord;
    }
    changPassWord (passWord) {
        this.passWord = passWord;
    };
    // 获取父类方法 示例
    get newInfo(){
        let info = super.info;
        console.log(info);
        return info + '--- new';
    }
}

var manager = new Manager("cuiht", 23, "123456");
manager.changName("hunter");
console.log(manager);

注意

class I extends User {
}
// 相当于
class I extends User {
    constructor (...arg){
        super(...arg);
    }
}

闻鸡起舞成就拼搏劲旅师,天道酬勤再现辉煌王者风。

相关文章

  • ES6-class

    javascript的语言传统方法是通过构造函数,定义并生成新的对象: function point(x,y){ ...

  • ES6-Class

    (参考自秒味课堂的视频讲解) Class 1.ES5中的原型 const Miaov = function ( )...

  • ES6-Class

    Class 的基本语法 ECMAScript 的原生构造函数大致有下面这些: Boolean() Number()...

  • ES6-class

    取值函数和存值函数; class MyClass{ constructon(){} get prop(){ ret...

  • ES6-class

  • ES6-class

    ES6提供了更接近传统语言的写法,引入了class(类)这个概念。新的class写法让对象原型的写法更加清晰、更像...

  • es6-class类

    1. 类的基本用法 es5造类 es6造类 2. 类的继承 使用extends关键字

  • ES6-class、extends、super

    ES6中 有了Class(类的概念),这使得原型、构造函数,继承等显得更加简单

  • es6-class的使用

    1\class的简介:ES6 的类,完全可以看作构造函数的另一种写法。 class Point {// ...} ...

  • ES6-Class的继承

    1、基本语法 ES6中的继承直接通过extends关键字来实现继承; 子类的constructor中必须显示调用s...

网友评论

      本文标题:ES6-class

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