1. 程式人生 > 程式設計 >詳解JavaScript原型物件的this指向問題

詳解JavaScript原型物件的this指向問題

目錄
  • 一、this指向
  • 二、修改this指向
    • 1、call()方法
    • 2、apply()方法
  • 總結

    一、this指向

    建構函式中的this 指向例項物件。那麼原型物件this的指向呢?

    如下:

    function Student(age,name){
                this.age = apkeNPge;
                this.name = name;
            }
            var that;
            Student.prototype.score = function(){
                console.log('孩子們成績都很好!');
                that = this;
            }
            var xl = new Student(18,'小熊');
            xl.score();
            console.log(that === xl);
    

    定義一個全域性變數that,在score函式裡面給它賦值,讓其指向函式裡面的this,呼叫例項物件的score方法,判斷that和例項物件是否一致,http://www.cppcns.com如果一致,則說明原型物件this的指向是該例項。

    列印結果為:

    在這裡插入圖片描述

    即原型物件裡面放的是方法,這個方法裡面的this 指向的是 這個方法的呼叫者,也就是這個例項物件。

    二、修改this指向

    1、call()方法

    寫一個簡單的兩數相加的函式。

     function fn(a,b){
               console.log(a+b);
                console.log(this);
    		 }
     fn(1,2)
    

    在函式內http://www.cppcns.com部列印this,呼叫函式,看其this的指向。

    在這裡插入圖片描述

    可知this指向window物件,如果我們想讓this指向我們新建立的一個物件,怎麼操作呢?

    先定義一個物件,

    o = {};
    

    然後通過call()修改this指向,讓其指向新建立的物件o

     o = {
                name: 'xl'
            };
            fn.call(o,1,2);
    

    列印結果為:

    在這裡插入圖片描述

    現在this指向新建立的物件o,即修改成功。

    2、apply()方法

    apply()和call()方法基本相同,這裡就不贅述,直接上程式碼:

     function fn(a,b){
               console.log(a+b);
                console.log(this);
            }
            o = {
                name: 'xl'
    pkeNP        };
            fn.apply(o,[1,2]);
    

    可以發現,這兩種方法還是有區別的,即:call()接受的引數必須是連續引數,而apply()方法接收引數的形式是陣列引數。

    總結

    www.cppcns.com

    本篇文章就到這裡了,希望能夠給你帶來幫助,也希望您能夠多多關注我們的更多內容!