美文网首页工作生活
JavaScript中的new操作符

JavaScript中的new操作符

作者: 泉泉泉泉泉泉 | 来源:发表于2019-06-29 17:02 被阅读0次

话不多说,直接看荔枝:

var num = Number(1)
var num1 = new Number(1)
console.log(typeof num)
console.log(num instanceof Number)
console.log(num instanceof Object)
console.log("------")
console.log(typeof num1)
console.log(num1 instanceof Number)
console.log(num1 instanceof Object)

结果输出:

number
false
false
------
object
true
true

从上面的荔枝我们可以看出使用new操作符后,typeof这个实例,得到的object,而不是number,这时候你只能使用instanceof来判断它是否是Number,其实本质原因是因为new操作符在背后做了手脚,具体它做了什么呢?
直接上荔枝:

var obj = new Base();

对于Base这个对象,执行以下三个语句

var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

这个只是个简单的例子,new实际上做了5件事情

  • 在堆中开辟对象内存空间, 记为obj
  • obj 中添加proto属性并指向 构造函数.prototype
  • 将构造函数中的this 指向obj
  • 执行构造函数内语句
  • 若构造函数中没有reutrn 或return this或基本类型(number、string、boolean、null、undefined)的值,则返回obj在堆中的内存地址;若return 引用类型,则返回值为这个引用类型

仿写new函数如下:

function Student(name, age) {
  this.name = name;
  this.age = age;
}

function _new() {
  console.log(arguments)
  console.log(...arguments)
  console.log('---------------')
  let args = [...arguments];
  console.log(args, "args")
  console.log(args instanceof Array)
  console.log(args.slice(1))
  console.log(...args.slice(1))
  let constructor = args[0];
  let obj = Object.create(constructor.prototype);
  let res = constructor.call(obj, ...args.slice(1))
  if ((typeof res == 'object' || typeof res == 'function') && res != null) {
    return res;
  } else {
    return obj;
  }
}

let s = new Student("z",18)
let _s = _new(Student,'l',19)
console.log(s)
console.log(typeof s)
console.log('-------')
console.log(_s)
console.log(typeof _s)

结果输出如下:

[Arguments] { '0': [Function: Student], '1': 'l', '2': 19 }
[Function: Student] 'l' 19
---------------
[ [Function: Student], 'l', 19 ] 'args'
true
[ 'l', 19 ]
l 19
Student { name: 'z', age: 18 }
object
-------
Student { name: 'l', age: 19 }
object
除了new之外,typeof、instanceof也是有区别的,总结出来就是一句话,

判断一个变量的类型非常简单。简单数值类型的类型判断用typeof,引用类型的类型判断用instanceof

JavaScript中哪些属于引用类型,哪些是基本数值类型呢?
详情请参考博客:https://www.jianshu.com/p/a6bfe51ac7b1

参考博客:https://blog.csdn.net/lyt_angularjs/article/details/86623988

相关文章

网友评论

    本文标题:JavaScript中的new操作符

    本文链接:https://www.haomeiwen.com/subject/vdppcctx.html