网站首页 » 前端开发 » JavaScript » ES6 中的构造函数(constructor)详解
上一篇:
下一篇:

ES6 中的构造函数(constructor)详解

前言

ES6 中的构造函数详解,在 ES5 中也已经有类似的实现了,只是在 ES6 这里换了一种方式来实现而已。

构造函数之旅

ES6 之前

在 ES6 以前我们会像下面这样定义构造函数并生成实例的:

function Person(p){
    this.name = p.name;
    this.age = p.age;
}

person.prototype.say = function(){
    console.log(this.name,this.age);
}

// 并通过 new 来创建一个实例
var xiaoming = {
    name:"小明",
    age:12
}

var xm = new Person(xiaoming);
xm.say();

ES6 之后

到了 ES6 就不再像上面那样写了,换了一种新的书写方式,让 JavaScript 的写法更接近其它语言的写法。比如上面的这个,用 ES6 的“类”写法就像下面这样:

class Person{
    constructor(p){
        this.name = p.name;
        this.age = p.age;
    }

    say (){
        console.log(this.name,this.age);
    }
}

// 不过在创建实例时还是沿用了 ES5 的写法,也是通过 new 关键字来创建

var xiaoming = {
    name:"小明",
    age:12
}

const xm = new Person(xiaoming);
xm.say();

所以以后看到代码中有 constructor 就不要再害怕了,毕竟它不是什么新东西,只是换了一种写法。

这里有一点需要注意的是在构造函数中创建的的变量,函数等会完全地拷贝一份到新实例中,也就是说每一个新实例都会拥有一份构造函数中的变量和方法。相当于深度拷贝了一份。而放在构造函数外的变量或者方法都只属于 Person 类。但通过 Person 类创建的实例也可以使用这些变量和方法,因为实例可以通过原型链来调用这些方法。

prototype 对象的 constructor 属性指向类本身。

console.log(Person.prototype.constructor === Person); // true

类内部默认使用严格模式。

constructor 方法是类的默认方法,通过 new 命令生成对象实例时会自动调用这个方法,类必须有 constructor 方法,如果一个类没有显式定义构造函数,那么一个空的 constructor 方法会自动添加到类中。

类的方法都定义在 prototype 对象上, 我们可以把新方法添加到 prototype 上。通过 Object.assign 方法可以很方便地一次向类中添加多个方法:

class Person{
    constructor(p){
        this.name = p.name;
        this.age = p.age;
    }
    say (){
        console.log(this.name,this.age);
    }
}

var xiaoming = {
    name:"小明",
    age:12
}

const xm = new Person(xiaoming);
xm.say();

Object.assign(Person.prototype,{
    changeName (){
        this.name = '云库网';
        console.log(this.name);
    },
    changeAge (){
        this.age = 18;
        console.log(this.age);
    }
});

xm.changeName(); // 云库网
xm.changeAge(); // 18

ES6 中的构造函数就分享到这里。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/es6-constructor/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END