🧑🎓 个人主页：《爱蹦跶的大A阿》
🔥当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》
目录
✨ 前言
✨ 正文
第一节:构造函数
第二节:new操作符
第三节:实例与原型
✨ 结语
✨ 前言
JavaScript中的构造函数是一种特殊的函数,用于生成对象。它们通常以大写字母开头,可以通过new操作符来调用。
new操作符在调用构造函数时会进行以下操作:
- 创建一个空的JavaScript对象
- 将这个空对象的__proto__属性链接到构造函数的prototype属性,从而使这个空对象继承构造函数的prototype属性中的方法和属性
- 将构造函数内部的this绑定到这个空对象
- 如果构造函数没有返回对象,则将这个空对象作为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")时:
- 创建了一个空对象person
- person.proto 链接到了 Person.prototype
- this在Person函数内部指向了person
- 最后返回了person对象
所以person对象就可以调用继承的sayName方法。
需要注意的是,如果构造函数返回了一个对象,那么new表达式会直接返回这个对象,而不是创建的空对象:
function Person(name) {
this.name = name;
return {
name: name
};
}
const person = new Person("John");
console.log(person.name); // 输出 "John"这里构造函数返回了一个对象,new表达式直接将这个对象返回了,而不是内部创建的空对象。
✨ 正文
第一节:构造函数
- 构造函数是一种特殊的函数,主要用途是初始化新创建的对象。
- 构造函数名的第一个字母要大写,以区别于普通函数。
- 构造函数可以接受参数,用于向新对象传递初始化值。
- 构造函数内部使用this关键字来引用新创建的对象。
- 构造函数不需要return来返回值,通常会省略return语句。
- 如果return一个对象,则该对象会覆盖内部创建的新对象,作为构造函数的返回值。
- 构造函数可以在原型对象上定义方法,由所有实例共享使用。
// 构造函数定义
function Person(name, age) {
this.name = name;
this.age = age;
}
// 调用构造函数
const person = new Person('Jack', 18);第二节:new操作符
- new是一个操作符,用来在调用函数时生成一个新对象。
- 调用new时会进行以下操作:
- 创建一个空对象,对象原型链接到构造函数的原型
- 绑定this到新对象,执行构造函数代码
- 如果构造函数没有返回对象,则返回新对象
- new调用的主要作用:
- 创建新对象
- 链接原型,属性继承
- this绑定
- 返回新对象
- 如果构造函数返回了一个对象,new会直接返回该对象而不是内部创建的对象。
function Person(name) {
this.name = name;
return {
name: name
};
}
const person = new Person('Jack');
console.log(person.name); // Jack这么一比对,可以看出当构造函数返回对象时,new会将那个对象返回,而不是新建的this对象。
第三节:实例与原型
- 每个实例都会从构造函数的原型上继承属性和方法。
- 原型对象可以通过Object.getPrototypeOf(obj)查看。
- instanceof运算符可以检查实例与构造函数的关系。
- 构造函数的原型prototype属性指向原型对象。
- 实例的__proto__属性指向构造函数的prototype。
- 原型链会通过__proto__逐级查找属性和方法。
function Person() {}
var person = new Person();
person.[[Prototype]] -> Person.prototype -> Object.prototype -> null这样可以更直观地呈现原型链的层级关系。
另外,在讲解构造函数和原型关系时,可以添加更明确的说明:
构造函数的prototype属性指向原型对象,原型对象包含实例共享的属性和方法。实例通过__proto__隐式原型属性关联到原型对象,从而可以通过原型链查找属性和方法。
✨ 结语
通过这三个部分的讲解,我们全面详细地剖析了JavaScript中构造函数和new的工作原理、特性以及如何共同应用它们实现面向对象编程。这篇博客内容偏理论和概念性,如果需要的话可以补充更多具体代码案例进行辅助说明。请检查是否需要修改或补充解释某些部分。
