一、理解什么是prototype
了解什么是
prototype
首先要了解一句话,prototype
是函数的一种属性,是函数的原型对象。
前半句表明了prototype
是函数的属性,并不是对象的一种属性,证明了prototype
只能用函数名调用,而不是对象名调用,以下例子可以证明:
function Person(){
name = "123";
}
console.log(Person.prototype) //是可以访问到的。
let stu = new Person();
console.log(stu.prototype) //undefined
console.log(stu.name )
这个还要注意的一点,函数里面直接声明的属性,通过该函数实例的对象访问不到的。只是相当于函数内部的局部变量。对于学习java的我就非常不习惯了,还好es6的class
关键字解决了这一点。那么在class
出来之前是怎么声明类的属性和方法呢,后面我会说明。
然后理解什么叫原型对象?
let stu1 = new Person();
stu1.name = "stu1";
let stu2 = new Person();
console.log(stu1.name); //stu1
console.log(stu2.name); //undefined
上面定义了两个对象stu1
和 stu2
,然后给stu1
对象name属性。这里的name
称为对象属性
。然后打印两个对象的name属性,stu1有值,stu2没有值。证明:对象属性只能作用于当前实例(对象)
。了解了对象属性,接下来就说prototype
Person.prototype.age = "123"
let stu1 = new Person();
let stu2 = new Person();
console.log(stu1.age); //123
console.log(stu2.age); //123
这里看到了么,我们通过原型对象赋予的属性作用于所有的实例 (当前类)。 我理解为使用new关键字
,将当前的原型对象prototype
复制了一份给每一个实例。
总结:函数属性、对象属性、原型对象属性三者的区别
- 函数的属性只能在函数里作用,相当于局部的变量,不能被实例直接调用。
- 对象的属性作用于当前的对象。
- 原型对象
prototype
的属性作用于所有的实例。
二、ES5 和 ES6 定义类的区别
ES5定义类:
function Person(){
Person.prototype.name = "name"
Person.prototype.age = "age"
Person.prototype.Say = function(){
console.log('say hello');
}
}
ES6定义类:
class Person{
name = 'name';
age = 'age';
Say(){
console.log('say hello');
}
}