[js]this和call.call
阿新 • • 發佈:2018-11-11
JavaScript 的一大特點是,函式存在「定義時上下文」和「執行時上下文」以及「上下文是可以改變的」這樣的概念。
https://www.cnblogs.com/coco1s/p/4833199.html
this即1,作用域 2,context 3,環境
//按照原型鏈查詢機制往上級作用域找
var name = 'maotai';
var obj = {
fn: function () {
console.log(name);
}
};
obj.fn();
//輸出maotai
//this限制了執行環境 var name = 'maotai'; var obj = { fn: function () { console.log(this.name); } }; obj.fn(); //undefined
call的使用規則
function fn2() {
console.log("fn2 this: " + this);
}
fn2.call(); //fn2 this: [object Window]
function Fn(x, y) {
console.log(arguments); //實參集,類陣列
console.log(this);
}
var obj = {'name': 'maotai'};
Fn.call(obj, 1, 2);
Fn.call(); //window Fn.call(null); //window Fn.call(undefined); //window Fn.call(obj, 1, 2); //obj
把Fn放到obj環境執行.
- 例子1: Fn.call
function Fn() {
console.log(this.name);
}
var obj = {name:'maotai'};
Fn.call(obj);//Fn中的this被改成了obj
- 例子2: 輸出f2
function f1() { console.log('f1'); } function f2() { console.log('f2'); } f2.call(f1); //輸出f2
- 例子3: call.call
https://juejin.im/post/5a11b77051882529642148ba
function fn1() {
console.log("fn1 this: " + this);
}
function fn2() {
console.log("fn2 this: " + this);
}
fn1.call.call.call(fn2);
1:這個方法是在哪開始執行的 call(fn2)
2:執行後的結果是什麼 call(fn2) 前面的this 改成了fn2 前面方法照常執行
3:call(fn2) 前面是什麼,改變this 後會怎樣 call(fn2)
前面是fn1.call 改變this後 由於fn1是這次的行為主體(this),
是他執行了call 方法,所以fn1 被call(fn2)變成了 fn2,所以接下來執行的就是 fn2.call()
4:輸出 fn2 this: [object Window]