JavaScript面向对象之原型
2023-10-25 11:40:08
一、写在前面
本次内容全部是js的，没有ts内容，学习这些内容是为了之后更好的学习ts，如果不学习这些内容可能会导致之后ts的学习有地方难以理解。
二、面向对象之原型
假设我需要用js造一个小兵，以便以后造一队小兵。
var soldier = {
name: '小兵',
hp: 100,
attack: function () {
console.log('士兵攻击！');
},
};
现在我想要造第二个小兵，如果我直接把上面的代码复制一遍，那么这两个小兵就完全一样了，这显然不是我想要的结果。
于是我想到了一个办法，我可以在第一个小兵的基础上再造一个新的士兵。
var soldier2 = Object.create(soldier);
soldier2.name = '小兵2';
这样，我就造出了一个新的士兵，而且这个士兵和第一个士兵一样，都有name、hp和attack属性。
但是，如果我想让士兵2的攻击力比士兵1高一些，我该怎么做呢？
我可以在士兵2的attack函数中增加一个参数，表示攻击力。
soldier2.attack = function (damage) {
console.log('士兵2攻击！造成' + damage + '点伤害');
};
这样，士兵2的攻击力就比士兵1高了。
三、原型链
在JavaScript中，每个对象都有一个原型对象，原型对象也是一个对象。
原型对象的目的是共享属性和方法，以便子对象可以使用这些属性和方法。
在上面的例子中，soldier2的原型对象是soldier。
我们可以通过以下代码来访问soldier2的原型对象：
console.log(soldier2.__proto__);
四、构造函数
在JavaScript中，构造函数是一个特殊的函数，它用于创建对象。
构造函数的名称一般以大写字母开头，例如：
function Soldier() {
this.name = '小兵';
this.hp = 100;
this.attack = function () {
console.log('士兵攻击！');
};
}
我们可以使用new来调用构造函数，从而创建对象。
var soldier = new Soldier();
当我们使用new关键字调用构造函数时，构造函数会执行以下操作：
- 创建一个新的对象。
- 将新对象的原型对象设置为构造函数的prototype属性。
- 将新对象的this关键字指向新对象。
- 执行构造函数的函数体。
五、Object.create
Object.create()方法可以创建一个新的对象，并指定该对象的原型对象。
var soldier2 = Object.create(soldier);
这与以下代码的效果相同：
var soldier2 = new Soldier();
六、call和apply
call()和apply()方法可以改变函数的this关键字。
soldier2.attack.call(soldier1);
这将调用soldier2的attack函数，但是将soldier1作为this关键字。
soldier2.attack.apply(soldier1);
这与call()方法的效果相同，但是apply()方法的第二个参数是一个数组，而不是一组参数。
七、总结
原型是JavaScript面向对象编程的核心概念之一。
原型链是JavaScript中对象之间的一种继承关系。
构造函数是一种用于创建对象的特殊函数。
Object.create()方法可以创建一个新的对象，并指定该对象的原型对象。
call()和apply()方法可以改变函数的this关键字。
通过对这些知识点的理解，我们可以更好地理解JavaScript的面向对象编程。
