美文网首页
ES5的构造函数,ES6类和类的继承

ES5的构造函数,ES6类和类的继承

作者: 哟哟哟煎饼果子 | 来源:发表于2018-12-27 21:11 被阅读0次

这次我们来讲解一下关于ES6类以及继承操作,在此之前,我们先来说一下关于ES5是如何实现类以及类的继承的吧

废话不多说,上代码

一:ES5的构造函数

function Person(name,age){
    //构造函数里面的方法和实例
    this.name = name
    this.age = age
    this.run = function () {
        console.log(`${this.name}---${this.age}`)
    }
}

这是一个基本的构造函数,run是这个构造函数内的一个方法
注意:Person类的原型链上也有一方法work()


Person.prototype.sex= '男'
Person.prototype.work = function () {
    console.log(`${this.name}---${this.sex}`);
}

实例化这个构造函数并调用

var p = new Person('zhangsasn',20) 
p.run(); //张三---20
p.work(); //张三---男

结论:原型链上面的属性和方法通过被多个实例共享

另外ES5中静态方法不需要经过实例化
直接:

Person.setName = function () {
    console.log('静态方法')
}
//执行静态方法   不需要实例化
Person.setName();  //静态方法

二:ES5中的继承

在ES5的我使用的继承是对象冒充实现继承以及原型链继承相结合
至于为什么要相结合呢?
同样是这个例子

function Person(name,age){
    this.name = name
    this.age = age
    this.run = function () {
        console.log(`${this.name}---${this.age}`)  
    }
}   

我只实现对象冒充继承

function Web(name,age){
    Person.call(this,name,age)  //对象冒充实现继承  
}

这样做有一个缺点:无法继承原型链上属性和方法

比如:

Person.prototype.work = function () {
    console.log('work')//原型链上的实例方法
}
var w = new Web()
w.work()  //undefined

同理我只实现原型链继承

Web.prototype = new Person(); //原型链继承
var w = new Web('李四',20)
w.run();  //undefined---undefined

结论:无法把Web子类实例化后的参数传入Person类里面

下面我们正式说一下ES6类的实现
class Person{
    constructor(name,age){
        this._name = name
        this._age = age
    }
    getName(){
        console.log(this._name)
    }
    setName(name){
        this._name = name
    }
}
var p = new Person('张三1','20')

p.getName() //张三1
p.setName('李四')
p.getName() //李四

这里大家都能看懂吧 不懂的就要回去翻阅一下阮一峰大神的ES6教程

下面就是ES6中的继承

class Person{
    constructor(name,age){
        this.name = name
        this.age = age
    }
    getInfo(){
        console.log(`姓名:${this.name}年龄:${this.age}`);
    }
    run(){
        console.log('run')
    }
}

使用extends关键字实现继承

class Web extends Person {
    constructor(name,age,sex){
        super(name,age) //实例化Web子类的时候把子类的参数传给父类Person
        this.sex = sex
    }
    print(){
        console.log(this.sex)
    }
}
var w = new Web('张三','30','男')
w.print() //男
w.getInfo()  //姓名:张三年龄:30

如果想在ES6类中定义的静态方法

class Person{
    constructor(name){
        this._name = name 
    }
    run(){   //实例方法
        console.log(this._name)  
    }
    static work(){  //静态方法
        console.log('这是es6里面的静态方法')
        //静态方法无法读取类的属性以及方法
        console.log(this._name)  //undefined
    }
}

相关文章

  • ES5 和 ES6 继承比较:

    ES5构造函数和继承: ES6构造函数和继承:

  • ES的类与继承

    ES5中的类与继承 构造函数继承,原型继承,组合式继承 静态方法,静态属性,实例方法,实例属性 ES6中的类与继承...

  • (七)class

    类的继承 类的继承和封装 类必须有构造函数这个属性 上面那个是ES6写法,写一下注释 类的继承和封装

  • es5实现class类

    es5没有类,只有构造函数。ES6新增了class,用于创建类。本文通过es5来实现es6的class(一个Ani...

  • Js 中的类

    ES5中,使用构造函数是这样的: ES6中,构造函数 上面中constructor就是构造方法。注意定义类的方法时...

  • ES6——类(Class)

    ES5关于类 JavaScript 语言中,生成实例对象的传统方法是通过构造函数。 ES6关于类 ES6 提供了更...

  • js的继承方式

    1 类式继承 子类的原型对象 2 构造函数继承 创建即继承 3 组合继承 (类式继承和构造函数...

  • 你不知道的ES5和ES6继承

    ES5继承和ES6继承的区别,在ES6还没有发布的时候 ,js定义类是以函数的形式,例如 function Te...

  • js 继承

    构造函数继承 类式继承是在函数对象内调用父类的构造函数,使得自身获得父类的方法和属性。call和apply方法为类...

  • 构造函数相关笔记

    es5环境下写构造函数 继承 es6环境下的构造函数 继承 class的set和get clsss的静态方法

网友评论

      本文标题:ES5的构造函数,ES6类和类的继承

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