构造函数更改或新增原型链

椒盐大肥猫

已于 2024-01-29 14:53:24 修改

阅读量399

点赞数 10

分类专栏： JS 文章标签： javascript

于 2024-01-25 15:30:25 首次发布

本文链接：https://blog.csdn.net/qq_42832446/article/details/135845782

版权

JS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

文章讲述了构造函数如何通过`prototype`设置原型链，以及当构造函数返回非对象时对原型链的影响。同时介绍了类作为构造函数的语法糖，如何通过`prototype`重定义方法。

摘要由CSDN通过智能技术生成

构造函数：

构造函数返回默认原始值时（实例），构造函数通过prototype设置该构造函数的原型链，如下：

function Person (name) {
	this.name = name
}
Person.prototype.getName = function () {
	return `你好！${this.name}`
}
const person = new Person('张三')
person.getName() // 你好！张三

如果构造函数返回指定对象时，则不能通过prototype设置原型链，如下：

注意：如果构造函数返回非对象时，则会忽略该返回值，构造函数继续会返回原始值（默认的实例）

function Person (name) {
	this.name = name
	return {
		nameMsg: `你好！${this.name}`
	}
}
// 下面代码不会报错，但是getName方法无法添加到原型链上
Person.prototype.getName = function () {
	return `我是${this.name}`
}
const person = new Person('张三')
console.log(person.nameMsg) // 你好！张三
person.getName() // 会报错：person.getName is not a function，因为getName无非正常添加到原型链上

类是构造函数的语法糖，1的例子可以进行如下改写：

class Person {
	constructor(name) {
		this.name = name
	}
	getName () {
		return `你好！${this.name}`
	}
}
// 由于类是构造函数的语法糖，所以你仍然可以通过prototype来设置原型链的方法，
// 如下重新设置的getName方法会覆盖类声明getName
// Person.prototype.getName = function () {
//  return `我是${this.name}`;
// };
const person = new Person ("张三")
console.log(person.name) // 张三
console.log(person.getName()) // 你好！张三