深入解析JavaScript中构造函数和new操作符

🧑?🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》?、《JavaScript保姆级教程》、《krpano》

??

目录

? 前言

? 正文

第一节:构造函数

第二节:new操作符

第三节:实例与原型

? 结语

---

?

? 前言

????????JavaScript中的构造函数是一种特殊的函数,用于生成对象。它们通常以大写字母开头,可以通过new操作符来调用。

????????new操作符在调用构造函数时会进行以下操作:

1. 创建一个空的JavaScript对象
2. 将这个空对象的__proto__属性链接到构造函数的prototype属性,从而使这个空对象继承构造函数的prototype属性中的方法和属性
3. 将构造函数内部的this绑定到这个空对象
4. 如果构造函数没有返回对象,则将这个空对象作为new表达式的结果返回

举个例子:

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

Person.prototype.sayName = function() {
  console.log(this.name);
};

const person = new Person("John");

person.sayName(); // 输出 "John"

????????这里调用new Person("John")时:

1. 创建了一个空对象person
2. person.proto?链接到了 Person.prototype
3. this在Person函数内部指向了person
4. 最后返回了person对象

????????所以person对象就可以调用继承的sayName方法。

????????需要注意的是,如果构造函数返回了一个对象,那么new表达式会直接返回这个对象,而不是创建的空对象:

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

const person = new Person("John");

console.log(person.name); // 输出 "John"

?这里构造函数返回了一个对象,new表达式直接将这个对象返回了,而不是内部创建的空对象。

?

? 正文

第一节:构造函数

1. 构造函数是一种特殊的函数,主要用途是初始化新创建的对象。
2. 构造函数名的第一个字母要大写,以区别于普通函数。
3. 构造函数可以接受参数,用于向新对象传递初始化值。
4. 构造函数内部使用this关键字来引用新创建的对象。
5. 构造函数不需要return来返回值,通常会省略return语句。
6. 如果return一个对象,则该对象会覆盖内部创建的新对象,作为构造函数的返回值。
7. 构造函数可以在原型对象上定义方法,由所有实例共享使用。

// 构造函数定义
function Person(name, age) {
  this.name = name; 
  this.age = age;
}

// 调用构造函数
const person = new Person('Jack', 18);

第二节:new操作符

• new是一个操作符,用来在调用函数时生成一个新对象。
• 调用new时会进行以下操作:

1. 创建一个空对象,对象原型链接到构造函数的原型
2. 绑定this到新对象,执行构造函数代码
3. 如果构造函数没有返回对象,则返回新对象

• new调用的主要作用:

1. 创建新对象
2. 链接原型,属性继承
3. this绑定
4. 返回新对象

• 如果构造函数返回了一个对象,new会直接返回该对象而不是内部创建的对象。

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

const person = new Person('Jack');
console.log(person.name); // Jack

????????这么一比对,可以看出当构造函数返回对象时,new会将那个对象返回,而不是新建的this对象。

第三节:实例与原型

1. 每个实例都会从构造函数的原型上继承属性和方法。
2. 原型对象可以通过Object.getPrototypeOf(obj)查看。
3. instanceof运算符可以检查实例与构造函数的关系。
4. 构造函数的原型prototype属性指向原型对象。
5. 实例的__proto__属性指向构造函数的prototype。
6. 原型链会通过__proto__逐级查找属性和方法。

function Person() {}

var person = new Person();

person.[[Prototype]] -> Person.prototype -> Object.prototype -> null

????????这样可以更直观地呈现原型链的层级关系。

????????另外,在讲解构造函数和原型关系时,可以添加更明确的说明:

????????构造函数的prototype属性指向原型对象,原型对象包含实例共享的属性和方法。实例通过__proto__隐式原型属性关联到原型对象,从而可以通过原型链查找属性和方法。

? 结语

? ? ? ??通过这三个部分的讲解,我们全面详细地剖析了JavaScript中构造函数和new的工作原理、特性以及如何共同应用它们实现面向对象编程。这篇博客内容偏理论和概念性,如果需要的话可以补充更多具体代码案例进行辅助说明。请检查是否需要修改或补充解释某些部分。

?