JavaScript中各种源码实现

够手写实现各种JavaScript原生函数，可以说是摆脱API调用师帽子的第一步，我们不光要会用，更要去探究其实现原理!

对JavaScript源码的学习和实现能帮助我们快速和扎实地提升自己的前端编程能力。

实现一个new操作符

我们首先知道new做了什么：

1. 创建一个空的简单JavaScript对象(即{});
2. 链接该对象(即设置该对象的构造函数)到另一个对象 ;
3. 将步骤(1)新创建的对象作为this的上下文 ;
4. 如果该函数没有返回对象，则返回this。

知道new做了什么，接下来我们就来实现它
 

们看一下上面的代码：

1. 首先我们对参数context做了兼容处理，不传值，context默认值为window;
2. 然后我们将函数挂载到context上面,context.fn = this;
3. 处理参数，将传入myCall的参数截取，去除第一位，然后转为数组;
4. 调用context.fn，此时fn的this指向context;
5. 删除对象上的属性 delete context.fn;
6. 将结果返回。

以此类推，我们顺便实现一下apply，唯一不同的是参数的处理,代码如下：



 

细观察上面的代码，再看输出结果。

我们对Person类使用了bind将其this指向obj，得到了changeperson函数，此处如果我们直接调用changeperson会改变obj，若用new调用changeperson会得到实例 p,并且其__proto__指向Person,我们发现bind失效了。

我们得到结论：用bind改变了this指向的函数，如果用new操作符来调用，bind将会失效。

这个对象就是这个构造函数的实例，那么只要在函数内部执行 this instanceof 构造函数 来判断其结果是否为true，就能判断函数是否是通过new操作符来调用了，若结果为true则是用new操作符调用的，代码修正如下：

（编辑：潍坊站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!