ES5和ES6类的知识
ECMAScript中的构造函数可用来创建特定类型的对象。像 Object 和 Array 这样的原生构造函数,在运行时会自动出现在执行环境中。此外,也可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。
function Person(name, age, job) {
this.name = name
this.age = age
this.job = job
this.sayName = function () {
console.log(this.name)
}
}
const person1 = new Person('张三', 18, 'student')
要创建 Person 的新实例,必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下4个步骤:
1. 创建一个新对象
2. 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象)
3. 执行构造函数中的代码(为这个新对象添加属性)
4. 返回新对象
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。
class Person {
constructor(name, age, job) {
this.name = name
this.age = age
this.job = job
this.sayName = function () {
console.log(this.name)
}
}
}
const person1 = new Person('张三', 18, 'student')
上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。也就是说,ES5 的构造函数Person,对应 ES6 的Person类的构造方法constructor。
class Person {
// ...
}
typeof Person // "function"
Person === Person.prototype.constructor // true
上面代码表明,类的数据类型就是函数,类本身就指向构造函数。使用的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。
构造函数的prototype属性,在 ES6 的“类”上面继续存在。事实上,类的所有方法都定义在类的prototype属性上面。
class Person {
constructor () {
// ...
}
eat () {
console.log('food')
}
}
// 等同于
Person.prototype = {
constructor () {},
eat () {
console.log('food')
}
}
另外,ES6 类的内部所有定义的方法,都是不可枚举的。可以被for-in循环遍历出来的属性称为枚举属性。
for (const key in person1) {
console.log(key)
}
但是 ES5 类的内部定义的方法是可以枚举的。
function Person() {
// ...
}
const person1 = new Person()
Person.prototype.eat = function () {
console.log('eat')
}
for (const key in person1) {
console.log(key) // eat
}
如果只想遍历实例上的私有属性,需要添加额外的代码判断逻辑。通过hasOwnProperty可以做到。
for (const key in person1) {
if (person1.hasOwnProperty(key)) {
// ....
}
}
完