詳解JavaScript原型對(duì)象的this指向問題
一、this指向
構(gòu)造函數(shù)中的this 指向?qū)嵗龑?duì)象。那么原型對(duì)象this的指向呢?
如下:
function Student(age,name){ this.age = age; this.name = name; } var that; Student.prototype.score = function(){ console.log('孩子們成績(jī)都很好!'); that = this; } var xl = new Student(18,'小熊'); xl.score(); console.log(that === xl);
定義一個(gè)全局變量that,在score函數(shù)里面給它賦值,讓其指向函數(shù)里面的this,調(diào)用實(shí)例對(duì)象的score方法,判斷that和實(shí)例對(duì)象是否一致,如果一致,則說明原型對(duì)象this的指向是該實(shí)例。
打印結(jié)果為:
即原型對(duì)象里面放的是方法, 這個(gè)方法里面的this 指向的是 這個(gè)方法的調(diào)用者, 也就是這個(gè)實(shí)例對(duì)象。
二、修改this指向
1、call()方法
寫一個(gè)簡(jiǎn)單的兩數(shù)相加的函數(shù)。
function fn(a,b){ console.log(a+b); console.log(this); } fn(1,2)
在函數(shù)內(nèi)部打印this,調(diào)用函數(shù),看其this的指向。
可知this指向window對(duì)象,如果我們想讓this指向我們新創(chuàng)建的一個(gè)對(duì)象,怎么操作呢?
先定義一個(gè)對(duì)象,
o = {};
然后通過call()修改this指向,讓其指向新創(chuàng)建的對(duì)象o
o = { name: 'xl' }; fn.call(o,1,2);
打印結(jié)果為:
現(xiàn)在this指向新創(chuàng)建的對(duì)象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ā)現(xiàn),這兩種方法還是有區(qū)別的,即:call()接受的參數(shù)必須是連續(xù)參數(shù),而apply()方法接收參數(shù)的形式是數(shù)組參數(shù)。
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
關(guān)于JS模塊化的知識(shí)點(diǎn)分享
在本篇文章里小編給大家整理的是關(guān)于JS模塊化的知識(shí)點(diǎn)分享,有需要的朋友們可以學(xué)習(xí)下。2019-10-10JavaScript表單驗(yàn)證實(shí)現(xiàn)過程詳解
表單校驗(yàn)是注冊(cè)環(huán)節(jié)中必不可少的操作,表單校驗(yàn)通過一定的規(guī)則來確保用戶提交數(shù)據(jù)的有效性,下面這篇文章主要給大家介紹了關(guān)于el-form表單驗(yàn)證的一些實(shí)用方法,需要的朋友可以參考下2023-01-01Highslide.js是一款基于js實(shí)現(xiàn)的網(wǎng)頁(yè)中圖片展示插件
這篇文章主要介紹了Highslide.js是一款基于js實(shí)現(xiàn)的網(wǎng)頁(yè)中圖片預(yù)覽查看工具,需要的朋友可以參考下2007-05-05跟我學(xué)習(xí)javascript的this關(guān)鍵字
跟我學(xué)習(xí)javascript的this關(guān)鍵字,this是動(dòng)態(tài)綁定,或稱為運(yùn)行期綁定的,這就導(dǎo)致 JavaScript中的this關(guān)鍵字有能力具備多重含義,帶來靈活性的同時(shí),也為初學(xué)者帶來不少困惑2015-11-11JavaScript彈簧振子超簡(jiǎn)潔版 完全符合能量守恒,胡克定理
完全符合能量守恒,胡克定理的JavaScript彈簧振子(超簡(jiǎn)潔版,超越第一版!)2009-10-10精解window.setTimeout()&window.setInterval()使用方式與參數(shù)傳遞問題!
精解window.setTimeout()&window.setInterval()使用方式與參數(shù)傳遞問題!...2007-11-11JavaScript結(jié)合Canvas繪畫畫運(yùn)動(dòng)小球
這篇文章主要介紹了JavaScript結(jié)合Canvas畫運(yùn)動(dòng)小球,canvas被稱為畫布,可以結(jié)合javascript實(shí)現(xiàn)繪制各種圖形,制作各種炫酷的動(dòng)畫效果,下面文章更多詳細(xì)內(nèi)容介紹需要的小伙伴可以參考一下2022-03-03