this和call,apply,bind

Ali_ 發(fā)布于2019-08-23 12:42 / 2427人閱讀

摘要：中的代表的是當(dāng)前行為的主體中的代表的是當(dāng)前行為的執(zhí)行環(huán)境區(qū)域是誰和函數(shù)在哪里寶的和在哪執(zhí)行的都沒有任何關(guān)系函數(shù)執(zhí)行，首先看函數(shù)名前面是否有有的話，前面是誰就是誰沒有的話就是自執(zhí)行函數(shù)中的永遠(yuǎn)是給元素的某一個(gè)事件綁定方法，當(dāng)事件觸

this

js中的this代表的是當(dāng)前行為的主體

js中的context代表的是當(dāng)前行為的執(zhí)行環(huán)境區(qū)域

this是誰和函數(shù)在哪里寶的和在哪執(zhí)行的都沒有任何關(guān)系

函數(shù)執(zhí)行，首先看函數(shù)名前面是否有"." ,有的話，"."前面是誰this就是誰,沒有的話this就是window

        function fn() {
            console.log(this)
        }
        var obj = {
            fn: fn
        }
        fn(); //this->window
        obj.fn(); //this->obj

        function sum() {
            console.log(this)//this->window
            fn(); //this->window
        }
        sum();

        var oo = {
            sum: function() {
                console.log(this)//this->00
                fn(); //this->window
            },
            aa:"aa"
        }
        oo.sum();

自執(zhí)行函數(shù)中的this永遠(yuǎn)是window

        function fn() {
            console.log(this)//window
        }
        fn()

給元素的某一個(gè)事件綁定方法，當(dāng)事件觸發(fā)的時(shí)候，執(zhí)行對(duì)應(yīng)的方法，方法中的this是當(dāng)前的元素 直接調(diào)用

        function fn() {
            console.log(this)
        }
        document.getElementById("div1").onclick = fn; //this->#div

匿名函數(shù)調(diào)用

        function fn() {
            console.log(this)
        }
        document.getElementById("div1").onclick = function(){
            console.log(this)            // this->#div
            fn()//this->window
        }

call

非嚴(yán)格模式

        var obj = { name: "jie" };
        function fn(num1, num2) {
            console.log(this);
            console.log(num1 + num2);
        }
        fn(100,200);   //this ->window  num1=100,num2=200
        fn.call(100,200)   //this->100  num1 = 200,num2=undefined
        fn.call(obj,100,200);  //this->obj  num1 = 100,num2=200

        fn.call();  //this->window
        fn.call(null); //this->window
        fn.call(undefined); //this->window

嚴(yán)格模式

        "use strict";
        var obj = {name:"jie"};
        function fn(num1,num2){
            console.log(this);
            console.log(num1+num2);
        }
        fn(100,200);   //this ->window  num1=100,num2=200
        fn.call(100,200)   //this->100  num1 = 200,num2=undefined
        fn.call(obj,100,200);  //this->obj  num1 = 100,num2=200

        fn.call();   //undefined
        fn.call(null);  //null
        fn.call(undefined);  //undefined

apply

apply和call的方法的作用是一模一樣的，

call在給fn傳遞參數(shù)的時(shí)候，是一個(gè)個(gè)的傳遞值的，而apply不是一個(gè)一個(gè)傳，而是把要給fn傳遞的參數(shù)值統(tǒng)一放在一個(gè)數(shù)組中進(jìn)行操作，但是也相當(dāng)于一個(gè)個(gè)的給fn的形參賦值

        var obj = { name: "jie" };
        function fn(num1, num2) {
            console.log(this);
            console.log(num1 + num2);
        }
        fn(100,200);   //this ->window  num1=100,num2=200
        fn.apply([100,200])   //this->[100,200]  num1 = NaN,num2=NaN
        fn.apply(obj,[100,200]);  //this->obj  num1 = 100,num2=200

        fn.apply();  //this->window
        fn.apply(null); //this->window
        fn.apply(undefined); //this->window

bind

預(yù)處理:事先把fn的this改變?yōu)槲覀兿胍慕Y(jié)果，并且把對(duì)應(yīng)的參數(shù)值也準(zhǔn)備好，以后要用到了，直接的執(zhí)行即可

var result = fn.bind(obj,1,2) 只是改變了fn中的this為obj,并且給fn傳遞了兩個(gè)參數(shù)值100,200,但是此時(shí)并沒有把fn這個(gè)函數(shù)執(zhí)行，執(zhí)行bind會(huì)有一個(gè)返回值,這個(gè)返回值result就是我們把fn的this改變后的哪個(gè)結(jié)果

        var obj = { name: "jie" };
        function fn(num1, num2) {
            console.log(this);
            console.log(num1 + num2);
        }
        var result = fn.bind(obj, 100, 200);  //this->obj  num1 = 100,num2=200
        console.log(result)