this和call,apply,bind

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

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

this

js中的this代表的是當前行為的主體

js中的context代表的是當前行為的執(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永遠是window

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

給元素的某一個事件綁定方法，當事件觸發(fā)的時候，執(zhí)行對應的方法，方法中的this是當前的元素 直接調(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

非嚴格模式

        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

嚴格模式

        "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ù)的時候，是一個個的傳遞值的，而apply不是一個一個傳，而是把要給fn傳遞的參數(shù)值統(tǒng)一放在一個數(shù)組中進行操作，但是也相當于一個個的給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

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

var result = fn.bind(obj,1,2) 只是改變了fn中的this為obj,并且給fn傳遞了兩個參數(shù)值100,200,但是此時并沒有把fn這個函數(shù)執(zhí)行，執(zhí)行bind會有一個返回值,這個返回值result就是我們把fn的this改變后的哪個結(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)