call() 方法在使用 一个指定的 this 值和若干个指定的参数值 的前提下 调用 某个函数或方法。
// 第一版
Function.prototype.call2 = function(context) {
// 首先要获取调用call的函数，用this可以获取
context.fn = this;
context.fn();
delete context.fn;
}
// 测试一下
var foo = {
value: 1
};
function bar() {
console.log(this.value);
}
bar.call2(foo); // 1
// 第二版
Function.prototype.call2 = function(context) {
context.fn = this;
var args = [];
for(var i = 1, len = arguments.length; i < len; i++) {
args.push('arguments[' + i + ']');
}
eval('context.fn(' + args +')');
delete context.fn;
}
/***
这里可以使用ES6的方法，不过call是ES3的方法
所以我们为了模拟实现一个 ES3 的方法，尽量去使用ES3的语法
所以使用了 eval 方法拼成一个函数去执行他，使用ES6的方法如下：
Function.prototype.call2 = function(context, ...args) {
context.fn = this;
context.fn(...args);
delete context.fn;
}
***/
// 测试一下
var foo = {
value: 1
};
function bar(name, age) {
console.log(name)
console.log(age)
console.log(this.value);
}
bar.call2(foo, 'kevin', 18);
// kevin
// 18
// 1
// 第三版
// 1.this 参数可以传 null，当为 null 的时候，视为指向 window
// 2.函数是可以有返回值的！
Function.prototype.call2 = function (context) {
var context = context || window;
context.fn = this;
var args = [];
for(var i = 1, len = arguments.length; i < len; i++) {
args.push('arguments[' + i + ']');
}
var result = eval('context.fn(' + args +')');
delete context.fn
return result;
}
// 测试一下
var value = 2;
var obj = {
value: 1
}
function bar(name, age) {
console.log(this.value);
return {
value: this.value,
name: name,
age: age
}
}
bar.call2(null); // 2
console.log(bar.call2(obj, 'kevin', 18));
// 1
// Object {
// value: 1,
// name: 'kevin',
// age: 18
// }
apply的模拟实现（https://github.com/mqyqingfeng/Blog/issues/11看看评论）
Function.prototype.apply = function (context, arr) {
var context = Object(context) || window; // 可优化
context.fn = this;
var result;
if (!arr) {
result = context.fn();
}
else {
var args = [];
for (var i = 0, len = arr.length; i < len; i++) {
args.push('arr[' + i + ']');
}
result = eval('context.fn(' + args + ')')
}
delete context.fn
return result;
}
bind的模拟实现
// 第一版
Function.prototype.bind2 = function (context) {
var self = this;
return function () {
self.apply(context);
}
}
//第二版传参模拟实现
Function.prototype.bind2 = function (context) {
var self = this;
// 获取bind2函数从第二个参数到最后一个参数
var args = Array.prototype.slice.call(arguments, 1);
return function () {
// 这个时候的arguments是指bind返回的函数传入的参数
var bindArgs = Array.prototype.slice.call(arguments);
self.apply(context, args.concat(bindArgs));
}
}
完成了这两点，最难的部分到啦！因为 bind 还有一个特点
就是一个绑定函数也能使用new操作符创建对象
这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。
也就是说当 bind 返回的函数作为构造函数的时候，bind 时指定的 this 值会失效
但传入的参数依然生效。举个例子：
var value = 2;
var foo = {
value: 1
};
function bar(name, age) {
this.habit = 'shopping';
console.log(this.value);
console.log(name);
console.log(age);
}
bar.prototype.friend = 'kevin';
var bindFoo = bar.bind(foo, 'daisy');
var obj = new bindFoo('18');
// undefined
// daisy
// 18
console.log(obj.habit);
console.log(obj.friend);
// shopping
// kevin
注意：尽管在全局和 foo 中都声明了 value 值，最后依然返回了 undefind，说明绑定的 this 失效了
如果大家了解 new 的模拟实现，就会知道这个时候的 this 已经指向了 obj。
// 第三版
Function.prototype.bind2 = function (context) {
var self = this;
var args = Array.prototype.slice.call(arguments, 1);
var fbound = function () {
var bindArgs = Array.prototype.slice.call(arguments);
/*
当作为构造函数时，this 指向实例，self 指向绑定函数
因为下面一句 `fbound.prototype = this.prototype;`
已经修改了 fbound.prototype 为 绑定函数的 prototype
此时结果为 true，当结果为 true 的时候，this 指向实例。
当作为普通函数时，this 指向 window，self 指向绑定函数
此时结果为 false，当结果为 false 的时候，this 指向绑定的 context。
*/
self.apply(this instanceof self ? this : context, args.concat(bindArgs));
}
// 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承函数的原型中的值
fbound.prototype = this.prototype;
return fbound;
}
但是在这个写法中，我们直接将 fbound.prototype = this.prototype
我们直接修改 fbound.prototype 的时候，也会直接修改函数的 prototype
这个时候，我们可以通过一个空函数来进行中转：
// 第四版
Function.prototype.bind2 = function (context) {
var self = this;
var args = Array.prototype.slice.call(arguments, 1);
var fNOP = function () {};
var fbound = function () {
var bindArgs = Array.prototype.slice.call(arguments);
self.apply(this instanceof self ? this : context, args.concat(bindArgs));
}
fNOP.prototype = this.prototype;
fbound.prototype = new fNOP();
return fbound;
}
//The Last
Function.prototype.bind2 = function (context) {
if (typeof this !== "function") {
throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
}
var self = this;
var args = Array.prototype.slice.call(arguments, 1);
var fNOP = function () {};
var fbound = function () {
self.apply(this instanceof self ? this : context, args.concat(Array.prototype.slice.call(arguments)));
}
fNOP.prototype = this.prototype;
fbound.prototype = new fNOP();
return fbound;
}
网友评论