javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript new操作符

JavaScript中的new操作符的具体使用

作者:没空铲屎的艾伦

本文主要介绍了JavaScript中的new操作符的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

JavaScript中的new操作符是一个非常重要的概念,它可以让我们创建一个自定义的对象类型或者一个内置的对象类型,比如Array、Date、Function等。那么,new操作符到底做了什么呢?我们来一步一步分析。

new做了什么?

首先,当我们使用new操作符调用一个函数时,这个函数就会被当作一个构造函数,也就是说,它会用来创建一个新的对象实例。例如:

function Person(name) {  
    this.name = name;
}  
var p1 = new Person("Allen");  

这里,我们定义了一个Person函数,然后用new操作符创建了一个p1对象,这个对象的类型是Person,它有个name属性,赋值为"Allen"

那么,具体来说,new操作符做了哪些事情呢?我们可以总结为以下四个步骤:

例如:

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函数返回了一个对象。

如何手写一个new

底层实现上,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操作符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文