javascript中的new操作符是一个非常重要的概念,它可以让我们创建一个自定义的对象类型或者一个内置的对象类型,比如Array、Date、Function等。那么,new操作符
javascript中的new操作符是一个非常重要的概念,它可以让我们创建一个自定义的对象类型或者一个内置的对象类型,比如Array、Date、Function等。那么,new操作符到底做了什么呢?我们来一步一步分析。
首先,当我们使用new操作符调用一个函数时,这个函数就会被当作一个构造函数,也就是说,它会用来创建一个新的对象实例。例如:
function Person(name) {
this.name = name;
}
var p1 = new Person("Allen");
这里,我们定义了一个Person
函数,然后用new操作符创建了一个p1
对象,这个对象的类型是Person
,它有个name
属性,赋值为"Allen"
。
那么,具体来说,new操作符做了哪些事情呢?我们可以总结为以下四个步骤:
newInstance
。[[Prototype]]
属性指向构造函数的prototype
属性,如果prototype
是一个对象的话。否则,newInstance保持为一个普通对象,它的[[Prototype]]
指向Object.prototype
。注意:[[Prototype]]
是一个内部属性,它表示对象的原型链。通过这一步,newInstance就可以继承构造函数原型上的属性和方法。例如:
function Foo(bar) {
this.bar = bar;
}
Foo.prototype.baz = function() {
console.log(this.bar);
};
var f1 = new Foo("Hello"); // f1是Foo类型的对象,它有bar属性和baz方法
var f2 = new Foo("World"); // f2也是Foo类型的对象,它也有bar属性和baz方法
f1.baz(); // Hello
f2.baz(); // World
function Bar() {
return {
name: "Bar"
};
}
var b1 = new Bar(); // b1是一个普通对象,它有name属性
console.log(b1 instanceof Bar); // false
这里,我们定义了两个函数Foo和Bar,并用new操作符创建了f1、f2和b1三个对象。可以看到,f1和f2都是Foo类型的对象,它们继承了Foo.prototype上的baz方法,并且有自己的bar属性。而b1则是一个普通对象,它只有name属性,并不属于Bar类型,因为Bar函数返回了一个对象。
底层实现上,class还是基于原型继承和构造函数的。基于这个理解:
function newInstance(constructor, ...args) {
// 创建一个空对象,且 __proto__ 指向 constructor.prototype
const obj = Object.create(constructor.prototype);
// 执行构造函数并绑定 this 到新对象上
const result = constructor.apply(obj, args);
// 如果构造函数返回了一个对象,则返回该对象
if (result && (typeof result === "object" || typeof result === "function")) {
return result;
}
// 否则返回新对象
return obj;
}
// 示例使用
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log(`Hello, I'm ${this.name}.`);
};
const person1 = newInstance(Person, "Allen");
person1.greet(); // 输出 "Hello, I'm Allen."
上述代码中,myNew
函数模拟了 new
操作符的行为,它接受两个参数:构造函数和构造函数的参数,返回一个新的实例对象。在函数内部,首先创建了一个新的空对象 obj
,然后将该对象的 __proto__
属性指向构造函数的原型对象,从而实现了原型继承。接着将构造函数的 this
绑定到新对象上,并执行构造函数。如果构造函数返回的是一个对象,则直接返回该对象,否则返回新创建的对象 obj
。
到此这篇关于JavaScript中的new操作符的具体使用的文章就介绍到这了,更多相关JavaScript new操作符内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: JavaScript中的new操作符的具体使用
本文链接: https://lsjlt.com/news/212303.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0