什么是new操作符
在JavaScript中,new
是一个用于创建对象实例的关键字。它用于调用构造函数,并返回一个新的对象。
mdn中是这么定义new
操作符的:new
运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。
1 2 3 4 5 6 7 8 9
| let Animal1=function(){this.name=1}; let animal=new Animal1;
let TestObj={} let t1=new TestObj;
|
例子:
1 2 3 4 5 6 7 8 9
| function Test(name) { this.name = name } Test.prototype.sayName = function () { console.log(this.name) } const t = new Test('yck') console.log(t.name) t.sayName()
|
1 2 3 4 5 6
| function Test(name) { this.name = name return 1 } const t = new Test('yck') console.log(t.name)
|
1 2 3 4 5 6 7 8
| function Test(name) { this.name = name console.log(this) return { age: 26 } } const t = new Test('yck') console.log(t) console.log(t.name)
|
new
通过构造函数 Test 创建出来的实例可以访问到构造函数中的属性
new
通过构造函数 Test 创建出来的实例可以访问到构造函数原型链中的属性,也就是说通过 new 操作符,实例与构造函数通过原型链连接了起来
- 构造函数如果返回原始值( 虽然例子中只有返回了 1,但是你可以试试其他的原始值,结果还是一样的 ),那么这个返回值毫无意义
- 构造函数如果返回值为 对象 ,那么这个 返回值会被正常使用
new操作符的作用
new
操作符会返回一个对象,所以我们需要在内部创建一个对象
- 这个对象,也就是构造函数中的
this
,可以访问到挂载在 this
上的任意属性
- 这个对象可以访问到构造函数原型上的属性,所以需要将对象与构造函数链接起来
- 返回原始值需要忽略,返回对象需要正常处理
手写/实现new操作符
new
关键字的实现原理可以分为以下几个步骤:
- 创建一个新的空对象。
- 将新创建的对象的
__proto__
属性指向构造函数的prototype
属性。
- 将构造函数的
this
关键字指向新创建的对象。
- 执行构造函数中的代码,给这个空对象添加属性和方法。
- 如果构造函数没有显式返回一个对象,则返回新创建的对象。
1 2 3 4 5 6 7 8 9 10
| function myNew(constructor, ...args) {
const obj = {};
Object.setPrototypeOf(obj, constructor.prototype);
const result = constructor.apply(obj, args);
return Object.prototype.toString.call(result) === '[object Object]' ? result : obj; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| function Person (name, age){ this.name = name this.age = age } Person.prototype.intro = function(){ console.log(`我叫${this.name},今年${this.age}岁`); }
const person1 = myNew(Person, '张三', 18) console.log(person1.name); console.log(person1.age); person1.intro()
const person2 = new Person('张三', 18) console.log(person2.name); console.log(person2.age); person2.intro()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| function Person (name, age){ this.name = name this.age = age return { name: this.name, age: this.age, sex: 'unknown' } } Person.prototype.intro = function(){ console.log(`我叫${this.name},今年${this.age}岁`); }
const person3 = myNew(Person, '李四', 20) console.log(person3);
const person4 = new Person('李四', 20) console.log(person4);
|