‍ 个人主页：《爱蹦跶的大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的工作原理、特性以及如何共同应用它们实现面向对象编程。这篇博客内容偏理论和概念性,如果需要的话可以补充更多具体代码案例进行辅助说明。请检查是否需要修改或补充解释某些部分。

​