1. 程式人生 > >[js]this和call.call

[js]this和call.call

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
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]