怎樣使用this

關於js裡面有哪些難點，艹，js裡面全是難點。。。什麼閉包，原型，函式，物件，型別檢測，this。。。但是作為一名正統的前端愛好者而言---這點痛算什麼。今天我們來解決this這個點。由於牽扯到this，則必定會牽扯到函式，因為沒有函式就沒有this的存在的意思。

話不多說，cut~

1. 作為物件的方法呼叫 2. 作為普通函式呼叫

3. 構造器呼叫

var obj = 
}console.log(obj.getname());  // jimmy

這裡的this指向的是該物件.由於函式裡面this是在執行時指定的，所以有乙個訣竅就是，函式裡面的this,指的是使用"."呼叫函式的所有者。

document.queryselector("#jimmy").onclick = function()

上面的this指的就是document.queryselector("#jimmy")。還有一種情況，當你使用的時候前面什麼都沒加，則這是函式中的this是global物件---window. 那上面的法則不是不對嗎？其實，在window裡面呼叫函式，可以這樣寫.

function getname()
window.getname();  //jimmy
getname();  //jimmy

上面兩種寫法是完全等價的，只是一般比較懶，直接寫成下面那一種了。

上面已經說了，普通函式的this的不指定性，即，在使用之前函式的this都是不定的，直到函式執行的時候。

在es5中規定，當你的函式在全域性中執行，該this會指向window.如果在嚴格模式下，則this為undefined

function name()
console.log(name());  // undefined

通常，當你的函式作為普通函式被呼叫的時候，this指向的是window，這個已經說過了~

function getname()
var obj = 
obj.getname();  //jimmy

在事件執行的時候，this指向的是該元素的引用

123
//js
document.queryselector('.name').onclick = function()
//得到的結果是.[object htmldivelement]

同樣,加深印象。

這其實很簡單，就是使用new + funciton 建立的是乙個物件，而不是乙個函式.

function getname()
getname.prototype.getname = function()
var get = new getname();
get.name(); //jimmy
get.getname(); //jimmy

這裡的this指向的就是getname.prototype上的。

但需要注意在構造器內不能顯示的返回乙個物件,否則你的例項化就會被破壞。

function getname();  //顯示返回乙個物件
}getname.prototype.getname = function()
var name = new getname();
console.log(name);  //{}
var name2 = getname();
console.log(name2); //{}
//顯示返回乙個非物件
function getname()
getname.prototype.getname = function()
var name = new getname();
console.log(name); //["object object"]
var name2 = getname();
console.log(name2);  //sam

function getname()
var obj = 
getname.call(obj);  //jimmy
//相當於
obj.getname = getname;
obj.getname();  //這乙個執行過程

所謂的this丟失一般指的就是函式中this的丟失. 因為函式中的this只有在執行的時候才會確定指向。

var getid = document.getelement;
getid("#name");  //這裡會報錯

上面的錯誤主要是因為,使用document.getelement時，this是指向document,在getelement裡面會需要使用this上面的一系列方法，而上面的方式則和普通呼叫函式的方式一樣，這時this的指向是全域性的global,所以會造成有些方法使用不到. 這裡可以改進:

var getid = (function(fn)
})(document.getelement);  //儲存引用
console.log(getid("#name"));

var getname = function()
sam();
}document.queryselector('.name').onclick = getname;

上面的問題其實已經說到過了，就是出在函式作為普通函式呼叫的時候，裡面的this永遠指向的是被賦予的物件。比如sam。上面getname函式在執行的時候this是指向document.queryselector('.name')的.所以不會有什麼問題.

改進的辦法就是將this儲存作用域(閉包).

var getname = function()
sam();
}document.queryselector('.name').onclick = getname;

由於閉包的長相完全是芙蓉姐姐，所以在es6中為了避免閉包的露臉加上了箭頭函式的feature.

var getname = function()
sam();
}document.queryselector('.name').onclick = getname;  //div

var getname = function()
document.queryselector('.name').onclick = function();

是不是感覺少了很多**~ 其實還可以再次改進，使用bind.

document.queryselector('.name').onclick = getname.bind(document.queryselector('.name'));

var num = [1,2,3,4,3,22];

怎樣使用this

怎樣使用ArrayAdapter

怎樣使用React Context API

怎樣使用React Context API

怎樣使用this

怎樣使用ArrayAdapter

怎樣使用React Context API

怎樣使用React Context API

相關推薦