【前端】JavaScript构造函数

news2024/11/24 14:31:39

文章目录

- 概念
- 执行过程
- 返回值
- 原型与constructor
- 继承方式
- - 原型链
  - 其他继承方式（还没写）
- 参考

概念

在JS中，通过new来实例化对象的函数叫构造函数。实例化对象，也就是初始化一个实例对象。构造函数一般首字母大写。

构造函数的目的：创建对象。

创建对象有两种方法：

构造函数+prototype
class

这里我们只讲前者。

执行过程

构造函数的执行过程其实是new操作符的基本过程。

过程

创建一个新对象，在内存中创建一个新地址
继承原型
改变构造函数的this指向，指向新创建的对象
新对象添加构造函数的属性和方法
根据构造函数的返回类型作判断，若是原始值则忽略，若是返回对象则正常处理

举例说明：

有构造函数Person：

function Person(name, age) {
    this.name = name;
    this.age = age;
}

用new创建对象：

let p1 = new Person('kitty', 1);

执行的过程（供理解，真实情况应该更复杂）：

function Person(name, age) {
    // 在内存中创建新地址
    let p1 = {};

    // 继承原型
    p1.proto = Person.prototype

    // 改变构造函数this的指向，添加属性和方法
    this.name = name;
    this.age = age;

    // 返回this
    return this
}

返回值

构造函数中，不要显示地返回任何值

若构造函数返回值为原始值：还是返回实例对象。

function Person(name) {
    this.name = name;
    return 'a'
}

let p1 = new Person('Kitty');
console.log(p1) //Person { name: 'Kitty' }

若构造函数返回值为对象：返回的是构造函数return的对象，而不是Person对象

function Person(name) {
    this.name = name;
    return {
        name:'suga'
    }
}

let p1 = new Person('Kitty');
console.log(p1) //{ name: 'suga' }
console.log(p1 instanceof Person)//false

原型与constructor

函数的原型与对象的原型：看这里【JavaScript高级】原型和继承相关：原型对象、函数原型、原型链和继承、继承的优化、对象判断相关方法

用new 构造函数来创建对象后，创建出来的对象实例的proto属性会指向构造函数的prototype。

function Person() {
  
}
var p1 = new Person()

// 上面操作相当于会进行如下的操作
p1.__proto__ = Person.prototype

constructor：函数的原型对象上的属性constructor会指向当前的函数对象。

即：

Person.prototype.constructor===Person //true

在这里插入图片描述

继承方式

原型链

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会通过它的__proto__隐式属性，找到它的构造函数的原型对象，如果还没有找到就会再在其构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链

Parent是父构造函数，Child是子构造函数
Child.prototype = new Parent()，子构造函数的原型为父构造函数的实例，相当于继承了父构造函数
想要调用child的getName()，但它本身没有这个方法，于是在 它的原型 上找

function Parent() {
    this.name = 'a'
}

Parent.prototype.getName = function () {
    console.log(this.name)
}

function Child() { }

//重点
Child.prototype = new Parent()

var child = new Child()

console.log(child.getName())//a