您好,登录后才能下订单哦!
这篇文章主要介绍“JS之如何处理new的情况”,在日常操作中,相信很多人在JS之如何处理new的情况问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JS之如何处理new的情况”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
Function.prototype.myBind = function(thisArg, ...prefixArgs) { const fn = this; return function(...args) { return fn.call(thisArg, ...prefixArgs, ...args); } }
但没有处理 通过 new 创建实例 的情况。
因为很少会遇到给 bind 返回的函数做 new 操作的场景。
我们先学习一下 new 操作符。
new 用于通过函数来创建一个对象实例,在很多语言中都能看到。
JS 的函数,除了可以是普通函数,比如:
function sum(a, b) { return a + b; }
还可以是构造函数,只需要在构造时在它前面加一个 new:
function Person(name, age) { this.name = name; this.age = age; } const person = new Person('前端西瓜哥', 100) // Person {name: '前端西瓜哥', age: 100}
new 创建一个新对象,做了下面几件事:
创建一个空对象 {}
;
空对象的原型属性 __proto__
指向构造函数的原型对象 Person.prototype
;
函数中的 this 设置为这个空对象;
如果该函数不返回一个对象,就返回这个 this,否则返回这个对象。
怎么判断一个函数正在被 new 操作符调用?
答案是 使用 instanceof 判断 this 是否为当前函数的实例,即 this instanceof Fn
为 true,表示在通过 new 构建实例。
我们看一个例子:
function Person() { if (this instanceof Person) { console.log('通过 new 构建实例'); } else { console.log('普通调用') } } Person() // 输出:普通调用 new Person() // 输出:通过 new 构建实例
在 Vuejs 的源码,你会看到下面代码,这里也用到了这个技巧。
function Vue(options) { if (__DEV__ && !(this instanceof Vue)) { warn('Vue is a constructor and should be called with the `new` keyword') } this._init(options) }
你在开发环境如果不通过 new 来使用 Vue 对象,会在控制台提示你要通过 new 来调用 Vue。
如果我们 new 的是 Function.prototype.bind 返回的新函数,会发生什么事情?
function Person(name, age) { this.name = name; this.age = age; } const BoundPerson = Person.bind(null, '前端西瓜哥'); const boundPerson = new BoundPerson(100); // Person {name: '前端西瓜哥', age: 100} boundPerson.__proto__ === Person.prototype // true
结果等价于直接去 new 原始函数。
不同的是,仍旧可以进行参数的预置。可以看到,构造函数的第一个参数,在调用 bind 的时候就提前设置为 '前端西瓜哥'。
完整实现如下:
Function.prototype.myBind = function(thisArg, ...prefixArgs) { const fn = this; const boundFn = function(...args) { // 通过 new 使用当前函数 if (this instanceof boundFn) { return new fn(...prefixArgs, ...args); } // 普通的方法调用当前函数 return fn.call(thisArg, ...prefixArgs, ...args); } boundFn.prototype = fn.prototype; return boundFn; }
这里我通过 this instanceof boundFn
来判断是否用了 new,如果是,就直接 new 原始函数然后返回,记得带上 bind 预置好的参数。
其他保持原样。
boundFn.prototype = fn.prototype;
这个可写可不写,只是让 bind 返回的新函数的 prototype 指向原函数的 prototype。
如果是原生 bind 返回的函数,它是没有 protoype 属性的,可以认为它是一种特别的函数,而我们实现的 bind 返回的却是一个普通函数,所以并不能完全模拟的。
如果你 追求完美的实现,可以研读一下 Function.prototype.bind 的标准:
然后再看看知名的 core.js 库中对 bind 的实现:
其中核心实现为:
// `Function.prototype.bind` method implementation // https://tc39.es/ecma262/#sec-function.prototype.bind module.exports = Function.bind || function bind(that /* , ...args */) { var F = aCallable(this); var Prototype = F.prototype; var partArgs = arraySlice(arguments, 1); var boundFunction = function bound(/* args... */) { var args = concat(partArgs, arraySlice(arguments)); return this instanceof boundFunction ? construct(F, args.length, args) : F.apply(that, args); }; if (isObject(Prototype)) boundFunction.prototype = Prototype; return boundFunction; };
这里有更多的细节:
这里判断了 this 是否为函数类型,不是函数会报错;
F.prototype 需要是一个对象或函数,才能赋值给新函数;
使用了普通函数和 arguments,这是为了兼容 ES5。
到此,关于“JS之如何处理new的情况”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。