JS中的继承—构造函数与实例

最新推荐文章于 2023-07-12 23:06:58 发布

原创最新推荐文章于 2023-07-12 23:06:58 发布 · 398 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#prototype #javascript #object #js

本文探讨了JavaScript中的实例和构造函数。首先解释了实例作为对象描述的概念，然后详细阐述了构造函数，包括它的定义、与普通函数的区别，以及在实例化过程中的具体步骤，如创建新对象、原型指向及返回实例对象。最后，通过实例分析帮助读者深入理解new操作符的工作原理。

实例

概念
实例可以当作一个对象的描述

const person = new Object()
// person 是 Object的实例

实例与对象的关系
实例都是对象，而对象不都是实例

const chinese = {
    area: '亚洲',
    color: '黄',
    // ...
}
console.log( chinese.__proto__.constructor === Object ) // true
// chinese 是 Object 的实例
// Object 不都是 chinese

构造函数

主要解答三个问题：

什么是构造函数
构造函数与普通函数有什么不同
实例化函数时都发生了什么

1.什么是构造函数

所有普通函数都可以当作构造函数。

2.构造函数与普通函数有什么不同

使用new关键字进行调用
命名一般以大写开头
内部使用this来创建属性
构造函数默认返回一个新对象，并具有构造函数定义的属性和方法

3.实例化函数时都发生了什么

我们先看一个实例化例子，再进行分析

function Person (){
    this.name = 'huhuf5'
    this.sex = '男'
} 
const person = new Person()

// 分析
person.name === 'huhuf5'
person.sex === '男'

person.__proto__ === Person.prototype

结合原型链知识以及构造函数的特点我们知道：

创建了一个新的对象
将原型指向构造函数
返回一个实例对象

根据特点我们可以自己来实现一个new

function newFn(){
    let obj = new Object() // 创建一个新的对象
    obj.__proto__ = Person.prototype  // 指向构造函数原型
    let result = Person.apply(obj , arguments) // 绑定this,执行构造函数
    return typeof result === 'object' ? result : obj  // 总是返回一个对象
}