这篇文章作为记录自己学习new的文章。当然网上有很多关于new实现的文章。但是 好记性不如烂笔头~ 自己记录一下总是没错的；
1.日常使用
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.occupation = "学生";
Person.prototype.sayYourName = function () {
console.log('我的名字是 ' + this.name);
}
let one = new Person("小明",10);
console.log(one) //{name: "小明", age: 10}
console.log(one.occupation) // 学生
console.log(one.sayYourName()) //我的名字是小明
上面例子大家再熟悉不过了。可以知道实例person可以访问到:
从这个例子中，我们可以看到，实例 person 可以：
- 访问到 Person 构造函数里的属性
- 访问到 Person.prototype 中的属性
2.分析
1.因为 new 的结果是一个新对象，所以在模拟实现的时候，我们也要建立一个新对象，假设这个对象叫 obj。
2.因为 obj 会能够访问 Person 构造函数里的属性。这边obj可以通过_prooto 进行绑定到Person.prototype 原型读写上面
3.此时还差一个内部的构造函数。我们通过apply改变传入的构造函数的指针
3.代码实现
function objectFactory() {
var obj = {}; //创建 一个新对象
Constructor = [].shift.call(arguments); //shift方法去除数组第一个元素，并返回
obj.__proto__ = Constructor.prototype;//实例的隐式原型指向构造函数原型，
Constructor.apply(obj, arguments);
//使用 apply，改变构造函数 this 的指向到新建的对象，这样 obj 就可以访问到构造函数中的属性
return obj; //返回该对象
};
这个代码实现了。我们去尝试一下,依旧使用上面的例子
//直接在浏览器复制就可以了
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.occupation = "学生";
Person.prototype.sayYourName = function () {
console.log('我的名字是 ' + this.name);
}
function objectFactory() {
var obj = {};
Constructor = [].shift.call(arguments);
obj.__proto__ = Constructor.prototype;
Constructor.apply(obj, arguments);
return obj;
};
let one = objectFactory(Person,"小明",10);
console.log(one) //{name: "小明", age: 10}
console.log(one.occupation) // 学生
console.log(one.sayYourName()) //我的名字是小明
new的实现就算完成啦。但是还有一种 情况我们需要考虑。假如构造函数有返回值，举个例子：
function Person (name, age) {
this.occupation = "学生";
this.age = age;
return {
name: name
}
}
var person = new Person('小明', '18');
console.log(person.name) //小明
console.log(person.age) //undefined
上面构造函数返回了一个对象，在实例 person 中只能访问返回的对象中的属性。所以我们还需要判断返回的值是不是一个对象，如果是一个对象，我们就返回这个对象，如果没有，我们该返回什么就返回什么。代码修改一下
function objectFactory() {
var obj = new Object(),
Constructor = [].shift.call(arguments);
obj.__proto__ = Constructor.prototype;
var ret = Constructor.apply(obj, arguments);
return typeof ret === 'object' ? ret : obj; //return 这边可以进行判断
};
好了 JS new 的学习算是结束了。自己也知道是个什么了。只作为学习记录，加深印象，也希望帮助到有需要的小伙伴们。大家可以直接去 大佬原文地址 查看学习。还是有很多优秀的文章的。溜了溜了~
网友评论