es5构造函数与es6构造函数

71 阅读 0 评论 47 点赞

我是靠谱客的博主英勇钢笔，最近开发中收集的这篇文章主要介绍es5构造函数与es6构造函数，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

概念

构造函数，是一种特殊的方法。主要用来在创建对象时初始化对象，即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。
在es5中创建对象的方式有两种：

const objec = {}
通过构造函数new一个对象实例。

es5的构造函数

function Worker(name, job) {   //命名一定要首字母大写
      this.name = name;     //公共的属性，所有实例共享
      this.job = job;
    }
    console.dir(Worker);  //输出对象目录
    console.log("worker构造函数的prototype", Worker.prototype);  //构造函数的原型对象
    Worker.prototype.coding = () => {  // 公共的方法挂在到原型对象上，可以让所有实例共享
      console.log("i love coding");
    };
    const icy = new Worker("icy", "coder");  //创建实例
    console.log("worker构造函数的prototype", Worker.prototype);  //可以看到公共方法被挂上去了
    console.log("实例的__proto__", icy.__proto__);  //实例的__proto__属性指向构造函数的portotype
  	console.log(icy.__proto__ === Worker.prototype) //true  证明上述结论

es6的构造函数

通过 class 关键字可以定义类，提供了更接近传统语言的写法，引入了 Class （类）这个概念作为对象的模板。

 // class 写法
class Animal {
  constructor (name, des) {
    this.name = name;
    this.des = des;
  }
  toString() {
    return '(' + this.type + ',' + this.name + ')';
  }
}
var m = new Animal('icy', 'godlike');
m.toString(); //icy godlike
类的所有方法都是定义在类的 prototype 属性上。
class Animal {
  constructor() { ... };
  toString() { ... };
  getName() { ... };
}

// 等价于
Animal.prototype = {
  constructor() {},
  toString() {},
  getName() {}
}
//在实例上调用方法相当于调用原型上的方法
 class A {}
    let a = new A();
    console.log(a.constructor === A.prototype.constructor); // true