new 操作符

我心飞翔 分类:javascript

new 操作符做的事情

  1. 创建了一个全新的对象。
  2. 将对象链接到这个函数的 prototype 对象上。
  3. 执行构造函数,并将 this 绑定到新创建的对象上。
  4. 判断构造函数执行返回的结果是否是引用数据类型,若是则返回构造函数执行的结果,否则返回创建的对象。
function myNew(Constructor, ...args) {
// console.log(Constructor);
// Constructor 输出结果
// ƒ Test() { 
//      console.log('被执行的函数。'); 
//      return '返回被执行的函数。'; 
// };
// console.log(args);
// args 输出结果
// [1, "JavaScript", "辛弃疾", {…}, Array(3)]
// console.log(args[3]);
// args[3] 输出结果
// {sname: "杨万里", number: 3, web: "vue"}
// console.log(args[4]);
// [5, "uniApp", "范仲淹"]
// 判断 Constructor 参数是否是函数
if (typeof Constructor !== 'function') {
return 'Constructor.apply is not a function';
};
// 1、创建了一个全新的对象。
let newObject = {};
// 2、将对象链接到这个函数的 prototype 对象上。
newObject.__proto__ = Constructor.prototype;
// 此处是把 1 / 2 步结合到一起
// const newObject = Object.create(Constructor.prototype);
// 3、执行构造函数,
// 并将 this 绑定到新创建的对象上。
let result = Constructor.apply(newObject, args);
// 4. 判断构造函数执行返回的结果是否是引用数据类型,
// 若是则返回构造函数执行的结果,
// 否则返回创建的对象。
return result != undefined && result != null ? result : newObject;
};
// 需要被 new 的函数
function NewTest() {
console.log('被执行的函数。'); // 被执行的函数。
return '返回被执行的函数。';
};
// 定义参数
let dataObj = {
sname: '杨万里',
number: 3,
web: 'vue'
};
let dataArray = [5, 'uniApp', '范仲淹'];
// 执行 myNew 函数
let test = myNew(NewTest, 1, 'JavaScript', '辛弃疾', dataObj, dataArray);
console.log(test); // 返回被执行的函数。

1、new 的原理是什么?

new 操作符做的事情。

2、通过 new 的方式创建对象和通过字面量创建对象有什么区别?

对象都是通过 new 产生。function Foo() {},function 是语法糖,内部等同于 new Function() 。let object = { number: 1 } ,使用字面量创建对象,内部也是使用了 new Object() 。对于创建一个对象来说,更推荐使用字面量的方式创建对象。因为使用 new Object() 的方式创建对象,需要通过作用域链一层层找到 Object ,如果使用字面量的方式就没有这个问题。

回复

我来回复
  • 暂无回复内容