站長資訊網
        最全最豐富的資訊網站

        JavaScript如何改變this指向?三種方法淺析

        JavaScript如何改變this指向?下面本篇文章給大家介紹一下JS改變this指向的三種方法,希望對大家有所幫助!

        JavaScript如何改變this指向?三種方法淺析

        前端(vue)入門到精通課程:進入學習

        一、this指向

        點擊打開視頻講解更加詳細

        this隨處可見,一般誰調用,this就指向誰。this在不同環境下,不同作用下,表現的也不同。

        以下幾種情況,this都是指向window

        1、全局作用下,this指向的是window

        console.log(window); console.log(this); console.log(window == this); // true

        2、函數獨立調用時,函數內部的this也指向window

        function fun() {    console.log('我是函數體');    console.log(this);  // Window  } fun();

        3、被嵌套的函數獨立調用時,this默認指向了window

        function fun1() {     function fun2() {         console.log('我是嵌套函數');         console.log(this);  // Window     }     fun2(); } fun1();

        4、自調執行函數(立即執行)中內部的this也是指向window

        (function() {     console.log('立即執行');     console.log(this);   // Window })()

        需要額外注意的是:

        • 構造函數中的this,用于給類定義成員(屬性和方法)
        • 箭頭函數中沒有this指向,如果在箭頭函數中有,則會向上一層函數中查找this,直到window

        二、改變this指向

        1、call() 方法

        call() 方法的第一個參數必須是指定的對象,然后方法的原參數,挨個放在后面。 (1)第一個參數:傳入該函數this執行的對象,傳入什么強制指向什么; (2)第二個參數開始:將原函數的參數往后順延一位

        用法: 函數名.call()

        function fun() {     console.log(this);  // 原來的函數this指向的是 Window } fun();   function fun(a, b) {     console.log(this); // this指向了輸入的 字符串call     console.log(a + b); } //使用call() 方法改變this指向,此時第一個參數是 字符串call,那么就會指向字符串call fun.call('call', 2, 3)  // 后面的參數就是原來函數自帶的實參

        2、apply() 方法

        apply() 方法的第一個參數是指定的對象,方法的原參數,統一放在第二個數組參數中。 (1)第一個參數:傳入該函數this執行的對象,傳入什么強制指向什么; (2)第二個參數開始:將原函數的參數放在一個數組中

        用法: 函數名.apply()

        function fun() {     console.log(this);  // 原來的函數this指向的是 Window } fun();   function fun(a, b) {     console.log(this); // this指向了輸入的 字符串apply     console.log(a + b); } //使用apply() 方法改變this指向,此時第一個參數是 字符串apply,那么就會指向字符串apply fun.apply('apply', [2, 3])  // 原函數的參數要以數組的形式呈現

        3、bind() 方法

        bind() 方法的用法和call()一樣,直接運行方法,需要注意的是:bind返回新的方法,需要重新 調用 是需要自己手動調用的

        用法: 函數名.bind()

        function fun() {     console.log(this);  // 原來的函數this指向的是 Window } fun();   function fun(a, b) {     console.log(this); // this指向了輸入的 字符串bind     console.log(a + b); } //使用bind() 方法改變this指向,此時第一個參數是 字符串bind,那么就會指向字符串bind let c = fun.bind('bind', 2, 3); c(); // 返回新的方法,需要重新調用 // 也可以使用下面兩種方法進行調用 // fun.bind('bind', 2, 3)(); // fun.bind('bind')(2, 3);

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 亚洲国产精品久久久久| 最新国产の精品合集| 久久久久夜夜夜精品国产| 亚洲?V乱码久久精品蜜桃 | 精品久久久无码人妻中文字幕豆芽| 国产成人精品福利网站在线观看 | 真实国产乱子伦精品一区二区三区| 成人精品一区二区久久久| 国产精品久线在线观看| 亚洲精品成人网站在线观看| 精品水蜜桃久久久久久久| 亚洲综合精品一二三区在线| 国产a∨精品一区二区三区不卡| 亚洲国产主播精品极品网红 | 精品国产一区二区三区久久 | 欧美精品免费在线| 国产午夜精品无码| 亚洲一日韩欧美中文字幕欧美日韩在线精品一区二 | 国产精品无码A∨精品影院| 一本久久精品一区二区| 欧美亚洲成人精品| 久久精品18| 久久99精品久久久久久齐齐| 国产精品 码ls字幕影视| 欧美精品第一页| 久久99精品国产99久久| 国产成人精品免费视频大| 国产l精品国产亚洲区在线观看| 精品成在人线AV无码免费看 | 麻豆精品久久精品色综合| 国产日韩精品在线| 国产韩国精品一区二区三区久久| 国内精品伊人久久久久av一坑| 四虎成人精品无码| 老司机亚洲精品影院| 免费精品无码AV片在线观看| 精品人妻中文字幕有码在线| 精品国产一区二区三区久久久狼| 国99精品无码一区二区三区| 91麻豆精品视频| 国产精品一久久香蕉产线看|