欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript深入理解系列之call與apply

 更新時間：2022年04月15日 08:04:47   作者：葉耶嘢  
Function.prototype.call和Function.prototype.apply都是非常常用的方法,它們的作用一模一樣,區(qū)別僅在于傳入?yún)?shù)形式的不同,下面這篇文章主要介紹了JavaScript深入理解系列之call與apply的相關資料,需要的朋友可以參考下

定義

call和apply：函數(shù)調(diào)動call()方法在執(zhí)行的時候，函數(shù)的里面的this會指向第一個參數(shù)值，除第一個參數(shù)值后面的若干支都是傳進該函數(shù)，簡而言之就是改變函數(shù)運行時的this指向。

使用示例： fn.call(obj, args1, args2...), fn.apply(obj, [arg1, arg2 ...]), call與apply調(diào)用除了第二個傳參方式不一樣，其余一樣。

舉個例子1：

var  obj = {
    name: '程序員米粉'
};
function fn() {
    console.log(this.name)
}
fn() // this.name => undefined
fn.call(obj) // this.name => '程序員米粉'

總結：

1、fn函數(shù)調(diào)動call方法執(zhí)行時候，函數(shù)的this指向了obj
2、call方法和fn函數(shù)都執(zhí)行了。

如果還看不明白，fn.call(obj)執(zhí)行的時候，可以看作在obj對象里面有個fn函數(shù)執(zhí)行。那么fn函數(shù)里面的this指向就是obj

再舉個例子2：

var  obj = {
    name: '程序員米粉',
    fn: function() {
        console.log(this.name)
    }
};
obj.fn(); // this.name => '程序員米粉'

總結：

1、例子1中的 fn.call(obj)執(zhí)行的時候，相當于例子2 obj.fn(); call方法被調(diào)用的時候，會改變當前調(diào)用函數(shù)的執(zhí)行上下文（就是改變this指向）。

模擬步驟1

例子1：

var  obj = {
    name: '程序員米粉'
};
function fn() {
    console.log(this.name)
}
fn.call(obj) // this.name => '程序員米粉'

例子2：

var  obj = {
    name: '程序員米粉',
    fn: function() {
        console.log(this.name)
    }
};
obj.fn(); // this.name => '程序員米粉'

要實現(xiàn)自己的myCall方法，首先觀察例子1和例子2中測 obj對象，有什么不一樣。

不一樣：

1、例子2中obj添加了fn函數(shù)方法。
2、例子2執(zhí)行方法是obj.fn()執(zhí)行，而例子1中執(zhí)行方法是 fn.call(obj)。

這就好辦了，我們?nèi)绾伟牙?改造成例子2呢？

我們總結一下步驟：

1、把fn函數(shù)設置為對象的一個屬性
2、調(diào)用fn函數(shù)執(zhí)行。
3、調(diào)用完畢之后，從對象中刪除fn屬性（函數(shù)）。 （給對象增加了屬性，我們調(diào)用完就可以刪掉）

思路有了，那代碼我們可以寫成這樣：

```js
obj.fn = fn;
obj.fn();
delete obj.fn; // 刪除屬性
```

根據(jù)上述思路，那按照這個思路，寫一個我們自己的myCall方法：

```js
Function.prototype.myCall = function(context) {
    context.fn = this;
    context.fn();
    delete context.fn;
};
var  obj = {
    name: '程序員米粉'
};
function fn() {
    console.log(this.name);
}
fn.myCall(obj) // this.name => '程序員米粉'
 ````

執(zhí)行一下myCall方法，可以得出來，this指向obj對象，并打印了期望的值，所以這個方法第一步完成了！

模擬步驟2

繼續(xù)完善一下myCall方法，把fn方法改一下，增加2個參數(shù), 再執(zhí)行一下方法。

function fn(index, value) {
	console.log(this.name);
    console.log(index, value);
}

fn.myCall(obj, 111, '我是一個值');
// this.name => '程序員米粉'
// undefined, undefined

執(zhí)行一個fn函數(shù)，只打印一個值出來，傳進入的參數(shù)，沒有打印出來。那需要改造一下方法，使參數(shù)也能打印出來。我們可以從arguments對象中取值，arguments對像代表函數(shù)傳進來的對象，打印看看就知道了。

Function.prototype.myCall = function(context) {
    console.log(arguments);
	context.fn = this;
	context.fn();
	delete context.fn;
};

打印出來的 arguments對象：

我們可以看到 arguments 對象結構是：

{ 
    '0': { name: '程序員米粉' }, 
    '1': 111, 
    '2': '我是一個值' 
}

0代表傳進來的第1個參數(shù)，1代表第2個參數(shù)，以此類推。我們看到arguments是一個類數(shù)組，那就可以用數(shù)組方法，存儲起來， 由于我們只是獲取參數(shù)，所以從1開始取值。

var args = [];
for (var i = 1; i < arguments.length; i++) {
    args.push('arguments[' + i + ']');
}
// args為 ["arguments[1]", "arguments[2]", "arguments[3]"]

取值的參數(shù)的問題解決了，我們下一步解決一下，如何把這些參數(shù)傳給函數(shù)執(zhí)行。

// 思考一下，怎樣才能這樣傳參給fn函數(shù)執(zhí)行
context.fn(arguments[1], arguments[2]);

可能有人想到如下方法：

// 把數(shù)組里的元素通過join方法，傳進函數(shù)的形參里
context.fn(args.join(','))

// 這樣的話，其實 context.fn(args.join(','))執(zhí)行變成：context.fn("arguments[1]", "arguments[2]");
// 變成了一個字符串，變成了一個死值了，無論傳什么，都變成字符串 "arguments[1]", "arguments[2]" 。。。。

可以有人又想到用ES6方法來解決。這個call是ES3的方法，所以還是不用ES6方法解決。

其實我們可以用 eval方法來解決。查文檔得知 eval() 函數(shù)會將傳入的字符串當做 JavaScript 代碼進行執(zhí)行。這到底是什么意思？

eval() 的參數(shù)是一個字符串。如果字符串表示的是表達式，eval() 會對表達式進行求值。如果參數(shù)表示一個或多個 JavaScript 語句，那么eval() 就會執(zhí)行這些語句。

舉個例子：

console.log(eval('2 + 2')); // 2 + 2 => 4, 最后輸出是2
console.log(eval('context.fn(' + args +')')) // 相當于運行 context.fn(arguments[1], arguments[2], ...)，使用eval執(zhí)行一串 JavaScript 語句。

args 會自動調(diào)用 Array.toString() 這個方法。通過eval自動執(zhí)行變成context.fn(arguments[1], arguments[2])這樣執(zhí)行。

代碼如下：

var  obj = {
	name: '程序員米粉'
};

function fn(index, value) {
	console.log(this.name); // 程序員米粉
	console.log(index, value); // 111 我是一個值
}

Function.prototype.myCall = function(context) {
	context.fn = this;
	var args = [];
	for (var i = 1; i < arguments.length; i++) {
		args.push('arguments[' + i + ']');
	}
	eval('context.fn(' + args + ')');
	delete context.fn;
};

fn.myCall(obj, 111, '我是一個值'); // this.name => '程序員米粉'

執(zhí)行一下方法，輸入完全符合我們的預期，我們終于搞定了！

模擬步驟3

第一個參數(shù)傳null或undefined，this指向為window

舉個例子：

var name = '程序員米粉'

function fn() {
	console.log(this.name); // 程序員米粉
}

fn.call(null); // this.name => '程序員米粉'

fn執(zhí)行的時候，還是輸出 this.name = '程序員米粉'，說明了什么，只要第一個參數(shù)傳 null或者undefined，那函數(shù)調(diào)用call方法，this指向window

函數(shù)執(zhí)行call方法，有返回值，那就返回。

舉個例子：

var name = '程序員米粉'

function fn() {
	console.log(this.name); // 程序員米粉
    return {
        name: this.name
    }
}

fn.call(null); // this.name => '程序員米粉'
// 執(zhí)行fn函數(shù)直接返回對象
// {
//    name: '程序員米粉'
// }

最終版實現(xiàn)call代碼

var obj = {
	name: '程序員米粉'
};

function fn(index, value) {
	console.log(this.name); // 程序員米粉
	console.log(index, value); // 111 我是一個值
	return {
		name: this.name,
		index: index,
		value: value
	};
}

Function.prototype.myCall = function(context) {
	var context = context || window;
	context.fn = this;
	var args = [];
	for (var i = 1; i < arguments.length; i++) {
		args.push('arguments[' + i + ']');
	}
	var result = eval('context.fn(' + args + ')');
	delete context.fn;
	return result;
};

fn.myCall(obj, 111, '我是一個值'); // this.name => '程序員米粉'
// 最終輸出
// {
//     name: "程序員米粉"
//     index: 111
//     value: "我是一個值"
// }

實現(xiàn)apply代碼

由于apply與call實現(xiàn)原理基本一樣，那就不詳細敘述了，直接上代碼：

Function.prototype.myApply = function(context, arr) {
	var context = context || window;
	context.fn = this;
	var result;
	if (!arr) {
		result = context.fn();
	} else {
		var args = [];
		for (var i = 0; i < arr.length; i++) {
			args.push('arr[' + i + ']');
		}
		result = eval('context.fn(' + args + ')');
	}
	delete context.fn;
	return result;
};

結語

希望看完這篇文章對你有幫助：

  • 理解call和apply原理
  • 實踐自己寫一個call和apply方法

到此這篇關于JavaScript深入理解系列之call與apply的文章就介紹到這了,更多相關js call與apply內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論