# 手写 new 操作符
# 看一下 new 操作符的使用
/**
* Car
* @descript 定义一个构造函数
* @param {string} name
* @param {string} color
*/
function Car(name, color) {
this.name = name;
this.color = color;
}
Car.prototype.sayInfo = function () {
console.log(`The color of the ${this.name} is ${this.color}`);
}
Car.prototype.sayName = function () {
console.log(`My name is ${this.name}`);
}
var car = new Car('bwm', 'red');
console.log(car.name) // bwm
console.log(car.sayName()) // My name is bwm
console.log(car.sayInfo()) // The color of the bwm is red
// 调用内置函数
var array = new Array(); // []
var obj = new Object(); // {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 实现思路
用构造函数来实现new操作符,实际上会经历以下4个步骤
- 创建一个新对象
- 将构造函数的作用域赋给新对象(因此this就指向了这个对象)
- 执行构造函数中的代码(为这个新对象添加属性)
- 返回新对象
# 模拟实现
// new操作符的简易实现
function myNew(fn) {
var obj = {};
obj.__proto__ = fn.prototype;
// 这里执行fn的constructor,this指向obj 并将传入的参数一并传入
var result = fn.apply(obj, Array.prototype.slice.call(arguments, 1));
// 验证返回的是否object
/** 这里应该严格注意 typeof返回object的其实还有null 简易版未做处理 **/
return typeof result === "object" ? result : obj;
}
function Car(name, color) {
this.name = name;
this.color = color;
}
Car.prototype.sayInfo = function () {
console.log(`The color of the ${this.name} is ${this.color}`);
}
Car.prototype.sayName = function () {
console.log(`My name is ${this.name}`);
}
var car = myNew(Car, 'bwm', 'red');
console.log(car.name) // bwm
console.log(car.sayName()) // My name is bwm
console.log(car.sayInfo()) // The color of the bwm is red
// 调用内置函数
var array = new Array(); // []
var obj = new Object(); // {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# 致谢
感谢大家阅读我的文章,如果对我感兴趣可以点击页面右上角,帮我点个star。
作者:前端小然子
链接: https://xiaoranzife.com/guide/jichu/%E6%89%8B%E5%86%99new.html
来源:前端小然子的博客
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
← 继承 手写一个instanceOf →