js中prototype，constructor的理解

连看4篇前辈的文章，记录一些知识点

1. Javascript继承机制的设计思想

2. Javascript 面向对象编程（一）：封装

3. Javascript面向对象编程（二）：构造函数的继承

4. Javascript面向对象编程（三）：非构造函数的继承

1. constructor

在Javascript语言中，new命令后面跟的不是类，而是构造函数(constructor)。

创建一个叫Student的构造函数，表示学生对象的原型

function Student(name){
　　　　this.name = name;
　　}

顺便带一下js中this的用法 Javascript 的 this 用法

对这个构造函数使用new，会生成Student的实例

var st1 = new Student("lilei")
console.log(st1.name) // lilei

此时st1 会自动含有一个属性constructor,指向构造函数

console.log(st1.constructor == Student) //true

用构造函数生成实例对象(使用new)，有一个缺点，那就是无法共享属性和方法

比如说有同学韩梅梅和同学李雷,他们共同在太阳班

function Student(name){
    this.name = name;
    this.class = "sun";
}
var st1 = new Student("lilei")
var st2 = new Student("hanmeimei")

输出二人的班级

console.log(st1.class)//sun
console.log(st2.class)//sun

班级改名，修改李雷的班级为月亮班
韩梅梅的班级名称没有发生变化，依然是sun(太阳班)

st1.class = "moon"
console.log(st1.class) //moon
console.log(st2.class) //sun

所以，构造函数中的共有属性无法做到数据共享，要做到数据共享，需要用到prototype

2. prototype

构造函数设置有prototype属性，属性中包含一个对象，需要共享的属性和方法，放在prototype对象里
。不需要共享的属性和方法，放在构造函数里

将上述例子改写

function Student(name){
    this.name = name;
}
Student.prototype = {class : "sun"}

var st1 = new Student("lilei")
var st2 = new Student("hanmeimei")

st1.prototype.class = "moon"
console.log(st1.class) //moon
console.log(st2.class) //moon

每一个实例都有一个constructor属性，默认调用prototype的constructor属性

st1.constructor  = st1.prototype.constructor

总结：
constructor储存不需要共享的属性和方法,而prototype对象储存需要共享的属性和方法

转载于:https://www.cnblogs.com/gggggggxin/p/10070496.html