JavaScript(ES6-10)语法详解 —— ES6基础知识【Class类】_prototype.eat = function()是定义什么-CSDN博客

本文链接：https://blog.csdn.net/qq_34829447/article/details/107723543

本文深入探讨了ES5和ES6中类的基础语法，包括类的声明、属性与方法的定义，以及如何使用原型链来声明通用方法。同时，文章对比了ES5和ES6在类声明上的差异，强调了ES6中方法定义的特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Class基础语法

ES5声明一个类

定义既带属性，又带通用方法的类

let Animal = function(type) {
	this.type = type;
	this.eat = function() {
		console.log('jack eating')
	}
}
let dog = new Animal('dog');
let monkey = new Animal('monkey');
console.log(dog); // 在属性中即会有type属性,又会有eat函数
console.log(monkey);// 在属性中即会有type属性,又会有eat函数
// 然而eat函数是通用方法,我们并不应该定义在function中

定义带有属性的类，并使用原型链的方式声明通用方法

let Animal = function(type) {
	this.type = type;
}
Animal.prototype.eat = function() {
	console.log('jack eat');
}
let dog = new Animal('dog');
let monkey = new Animal('monkey');
console.log(dog); // 在属性中只会有type属性,打开_prototype属性查看原型链会发现eat函数定义在原型链中
console.log(monkey);// 在属性中只会有type属性,打开_prototype属性查看原型链会发现eat函数定义在原型链中
// 此时如果想修改通用方法,可以使用如下方式
monkey.constructor.prototype.eat = function() {
	console.log('changed');
}
// 此时即使是通过monkey修改的,依旧会修改dog原型链中的eat函数,因为他们是同一个Animal原型链

ES6声明一个类

class Animal {
	constructor(type) {
		this.type = type;
	}
	eat() {
		console.log('jack eat');
	}
}
let dog = new Animal('dog');
let monkey = new Animal('monkey');
console.log(dog); // 在属性中只会有type属性,打开_prototype属性查看原型链会发现eat函数定义在原型链中
console.log(monkey);// 在属性中只会有type属性,打开_prototype属性查看原型链会发现eat函数定义在原型链中
// 注意!!
// 在Class中定义function会声明在原型链中,因为没有放在constructor中
console.log(typeof Animal); // Animal查看类型同样是function