摘要:一因為中的是在運行期綁定的,因此中的關鍵字具備多重含義。二具體在應用中,的指向大概可以分為以下四種。例如,或者都是為了改變函數內部的指向。
一、因為JavaScript中的this是在運行期綁定的,因此JavaScript中的this關鍵字具備多重含義。
二、具體在應用中,this的指向大概可以分為以下四種。
1.作為對象的方法調用 obj.run()
2.作為普通函數調用 function()
3.作為構造函數調用 var b =new a();
4.function.prototype.call或者function.prototype.apply調用
三、作為對象的方法調用和作為普通函數調用
window.name=bj;
var obj={
name:zzy, getName(){ console.log(this.name) }
}
obj.getNAme();//輸出的zzy
var getA=obj.getName;
getA(); //輸出的為bj
不管getA之前是getNAme(),還是其他某個對象的屬性,只要最后是以getA(),這種方式調用的,均視為普通函數調用,此時this指向window對象
但是,在ES5的strict模式下,作為函數調用的 this被規定不會指向全局對象
getA(); //輸出的為underfined
四.構造函數的調用
通常情況下,構造函數里的this指向那個返回的這個對象,但是如果構造器顯示的返回了一個object類型的對象,則this指向返回的object對象
var Myclass = function(){
this.name = "beidan";
}
var obj = new Myclass();
console.log(obj.name);//beidan
var Myclass = function(){
this.name = "beidan"; return{ //顯示的返回一個對象,注意!既要是顯示,即有return,也要是對象{} name:"test" }
}
var obj = new Myclass();
console.log(obj.name);//test
五.function.prototype.call或function.prototype.apply調用
call,apply都是為了改變函數內部this的指向。例如,function.apply()或者
function.apply()都是為了改變函數內部的this指向。
二者的作用完全一樣,只是接受參數的方式不太一樣。
function.call(this, arg1, arg2); //參數列表arg1,arg2 function.apply(this, [arg1, arg2]); //參數數組 [arg1,arg2]
第一個參數,指定了那個函數體內this對象的指向,它可以是javascript對象,如果為null,則函數體內的this會指向默認的window
第二個參數,call 需要把參數按順序傳遞進去,而 apply 則是把參數放在數組里。當參數不確定數量時用 apply ,然后把參數 push 進數組傳遞進去。或者也可以通過 arguments來獲取所有的參數。這樣看來,apply的使用率更高。
1.修正this指向
在實際開發過程中,會出現一下的情況
document.getElementById("div1").onclick = function(){
console.log(this.id); //div1 var func = function(){ console.log(this.id); } func(); //通過普通函數調用,this指向window,輸出undefined
}
使用call來改變this的指向
document.getElementById("div1").onclick = function(){
console.log(this.id); //div1 var func = function(){ console.log(this.id); }
func.call(this); //使func函數內部的this指向當前的函數對象,輸出div1
}
2.模擬繼承
function fruits() {}
fruits.prototype = {
color: "red", say: function() { console.log("My color is "+ this.color); }
}
var apple = new fruits;
apple.say(); //My color is red
但是,如果我們還有其它 2個對象 banana= {color : "yellow"} ,orange = {color:‘orange’},想使用say方法,但是又不想對它們重新定義say方法。
那么,我們可以用apply或者call 借用 fruit里面的say方法
banana = {color: "yellow"};
orange = {color:‘orange’};
apple.say.call(banana); //My color is yellow
apple.say.apply(orange ); //My color is orange
這里需要注意的是banana繼承apple.say的方法;
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109430.html
摘要:中創建對象的方式有很多,尤其是基于原型的方式創建對象,是理解基于原型繼承的基礎。該函數中的屬性指向該源性對象當通過該函數的構造函數創建一個具體對象時,在這個對象中,就會有一個屬性指向原型。 js中創建對象的方式有很多,尤其是基于原型的方式創建對象,是理解基于原型繼承的基礎。因此在這里匯總一下,并對各種方法的利弊進行總結和對比,不至于以后對這些概念有模糊。 簡單方式創建 var o = ...
摘要:構造函數返回值是或,這種情況下指向的是返回的對象。并執行了構造函數中的方法如果函數沒有返回其他對象,那么指向這個新對象,否則指向構造函數中返回的對象。對于文檔來說應當是唯一的。的值意味著其不可能是基本數據類型。 關于【Step-By-Step】 不積跬步無以至千里。 Step-By-Step (點擊進入項目) 是我于 2019-05-20 開始的一個項目,項目愿景:一步一個腳印,量變引...
摘要:前端筆記基本數據類型種數據類型基本類型復雜類型基本類型與引用類型的區別基本類型基本類型,是按值訪問,可以操作保存在變量中的實際值基本類型的值不可變輸出輸出其中的實際值并未變化,方法是返回了一個新的字符串也不能對基本類型添加屬性和方法表明了基 前端筆記/JavaScript 基本 數據類型 6種數據類型 基本類型: Undefined、Null、Boolean、String、Numbe...
摘要:線程在執行過程中與進程還是有區別的。但是線程不能夠獨立執行,必須依存在應用程序中,由應用程序提供多個線程執行控制。從邏輯角度來看,多線程的意義在于一個應用程序中,有多個執行部分可以同時執行。 關于js 1.原型鏈 2.AJAX請求數據時解決緩存的辦法3.js的繼承 ...
閱讀 3384·2023-04-26 01:46
閱讀 2905·2023-04-25 20:55
閱讀 5471·2021-09-22 14:57
閱讀 2974·2021-08-27 16:23
閱讀 1712·2019-08-30 14:02
閱讀 2063·2019-08-26 13:44
閱讀 644·2019-08-26 12:08
閱讀 2950·2019-08-26 11:47