Js中的new原理及其实现

作者 : runsly 本文共1125个字,预计阅读时间需要3分钟 发布时间: 2020-07-22 共28人阅读

前几天遇到一个有趣的问题,代码如下:

function Person(){
  this.age = 0;
  setInterval(() => {
    this.age++;
  }, 1000);
}
var p = new Person();

运行起来会发现p值是一个动态改变的对象,那么它是怎么做到的呢?下面一起来看看:

// 直接运行Person方法并打印当前this对象
function Person(){
  this.age = 0;
  setInterval(() => {
    this.age++;
    console.log(this);
  }, 1000);
}
Person();
// 打印的结果是window对象

上面的代码我们直接运行了Person方法,发现此时打印的是window对象,原因是函数在调用的时候函数的this指向window,下面我们看一下通过new Person()运行的结果如何:

// 通过new Person()方式调用
function Person(){
  this.age = 0;
  // 这里不用箭头函数最后会指向window对象
  setInterval(() => {
    this.age++;
    console.log(this);
  }, 1000);
}
var p = new Person();
// 打印的结果是当前的p对象

运行上面的代码会发现打印了当前的p对象,不难看出,new语法改变了我们调用函数时候的this指向,并返回了执行后的this对象,那么它是怎么做到的呢?我们可以用一个简单的实现解释一下其原理:

function Person(age) {
  this.age = age;  
}
Person.prototype.sayAge = function () {
  console.log(this.age);
}
function createNew (target, ...argArr) {
  // 判断类型
  if (Object.prototype.toString.call(target).slice(8, -1) !== ‘Function‘) return;
  // 以构造器的prototype属性为原型,创建新对象;
  var source = Object.create(target.prototype);
  // 在source上执行target内容
  target.apply(source, argArr);
  // 返回执行后的source
  return source;  
}
var p = createNew(Person, 18);
console.log(p.age);
p.sayAge && p.sayAge();
// 打印结果为
// 18
// 18

另一种解释方式是:

var p = {};
p._ptoto_ = Person.prototype;
Person.apply(p, 18);

Over,自行理解吧~

实用干货原创整理,转载请注明九九主题出处!本站所有资源均可以下载,qq一键登录购买SVIP更实惠,免注册扫码支付更方便。
九九主题 » Js中的new原理及其实现

常见问题FAQ

如何购买源码?
无需注册扫码付款即可下载。或者qq一键登录后签到领1圆钱后下载。
买你们的模板包安装吗?
500以上的模板包安装。另外,模板的安装费因模板的大小、复杂程度不同而不同,安装费:50~300。
你们提供网页修改服务吗?
专业建站15年,网页修改服务依据修改内容收费,详情咨询客服QQ9502669。