美文网首页
es6 class 和 extends 的本质

es6 class 和 extends 的本质

作者: 练习时长2年半的个人练习生 | 来源:发表于2020-08-13 11:51 被阅读0次

class声明的类 具有几个特点:

  • 必须用new 调用
  • 他的所有的方法都是不可枚举的
  • class 声明的类不能变量提升。
  • class的本质是一个构造函数function

class 只是function 声明构造函数的语法糖。
开始手写class


     class Person{
        constructor(name){
            this.name
        }
        say(){
            console.log(this.name + '说话')
        }
     }

     var Person = function(name){      
          if(new.target === undefined){
              throw('必须使用new调用class')
          }
          this.name = name
     }
     Object.defineProperty(Person.prototype,'say',{
         value:function(){
             console.log(this.name)
         },
         enumerable:false
     })

     let p = new Person('实例')
     p.say()

class 声明类的本质就是下面 手写这个function

extends 的本质

 class Animal {
        constructor(){

        }
        eat(){
            console.log('吃东西')
        }
    }
    class Person extends Animal {
        constructor(name) {
            super()
            this.name = name
        }
        say() {
            console.log(this.name + '说话')
        }
    }

    const p = new Person('张三')

    p.eat() //吃饭
    p.say()//张三说话

他的本质

    function Animal(type){
        this.type = type
    }
    Animal.prototype.eat = function(){
        console.log('吃饭')
    }
 
    function Person(name){
        Animal.call(this,'动物') //super的本质
        this.name = name 
    }
    Person.prototype = Object.create(Animal.prototype)
    Person.prototype.constructor = Person
    Person.prototype.say=function(){
        console.log('我叫'+this.name)
    }
    var p = new Person('张三');
    p.eat()//吃饭
    p.say()//我叫张三

super的本质,是在子类执行父类的方法,然后把this绑定执行一遍

相关文章

  • es6 class 和 extends 的本质

    class声明的类 具有几个特点: 必须用new 调用 他的所有的方法都是不可枚举的 class 声明的类不能变量...

  • JavaScript继承

    es6继承 class Square extends Polygon {constructor(length) {...

  • JS继承之extends

    ES6中有关 class 的继承方式,引入了 extends 关键字。但其本质仍然是 构造函数 + 原型链的 组合...

  • ES6新特性

    ES6新特性 1.类(支持继承 extends)class TestClass { constructor(...

  • ES6学习

    最常用的ES6特性let, const, class, extends, super, arrow functio...

  • 无标题文章

    最常用的ES6特性 let, const, class, extends, super, arrow functi...

  • JavaScript ES6新语法

    最常用的ES6特性 let, const, class, extends, super, arrow functi...

  • ES6: extends

    基本用法 ES6中有关class的继承方式,引入了extends关键字。但其本质仍然是构造函数+原型链的组合式继承...

  • JavaScript 面向对象之原型链继承实现

    在ES6下可以通过class 关键字创建一个类, 也可以通过class .. extends 实现继承, 但只是...

  • ES6个人总结

    首先感谢简书的es6说明的作者 ES6常用的功能及方法: 1.let、const 2.class, extends...

网友评论

      本文标题:es6 class 和 extends 的本质

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