詳解JavaScript原型對象的this指向問題

更新時間：2021年11月18日 10:07:31 作者：bear*6

這篇文章主要為大家介紹了JavaScript原型對象的this指向問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

一、this指向

構造函數中的this 指向實例對象。那么原型對象this的指向呢？

如下：

function Student(age,name){
            this.age = age;
            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和實例對象是否一致，如果一致，則說明原型對象this的指向是該實例。

打印結果為：

在這里插入圖片描述

即原型對象里面放的是方法, 這個方法里面的this 指向的是這個方法的調用者, 也就是這個實例對象。

二、修改this指向

1、call()方法

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

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

在函數內部打印this，調用函數，看其this的指向。

在這里插入圖片描述

可知this指向window對象，如果我們想讓this指向我們新創(chuàng)建的一個對象，怎么操作呢？

先定義一個對象，

o = {};

然后通過call()修改this指向，讓其指向新創(chuàng)建的對象o

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

打印結果為：

在這里插入圖片描述

現在this指向新創(chuàng)建的對象o，即修改成功。

2、apply()方法

apply（）和call()方法基本相同，這里就不贅述，直接上代碼：

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

可以發(fā)現，這兩種方法還是有區(qū)別的，即：call()接受的參數必須是連續(xù)參數，而apply()方法接收參數的形式是數組參數。