千鋒教育JavaScript全套視頻教程（10天學(xué)會Js，前端javascrip
一.this關(guān)鍵字的解讀
? 1.每一個函數(shù)內(nèi)部都有一個關(guān)鍵字是this ,可以讓我們直接使用的
2.函數(shù)內(nèi)部的 this 指向誰，取決于函數(shù)的調(diào)用方式
? 3.函數(shù)內(nèi)部的 this 只和函數(shù)的調(diào)用方式有關(guān)系，和函數(shù)的定義方式?jīng)]有關(guān)系
?
? 普通函數(shù) - this - window
? 自執(zhí)行函數(shù) - this ?- window
? 定時器 - this - window
? 函數(shù)表達式 - this - window
? 事件處理函數(shù) - this - 觸發(fā)事件的元素對象
? 對象里面的函數(shù)(方法) ?- this ?- 當(dāng)前調(diào)用方法的對象
? function fn() {//普通函數(shù)
? ? console.log(this);
? }
? function fn () {
? ? console.log(this);
? }
? fn();//window
? window.fn();//window
? document.onclick = fn;//事件來調(diào)用 document
? fn();
? window.fn();
? document.noclick = fn;
? var fn = function () {
? ? console.log(this);//window
? }
? fn();
? var fn = function () {
? ? console.log(this);
? }
? window.setTimeout(function () {
? ? console.log(this);//window
? }, 1000);
? var obj = {
? ? name: 'zhangsan',
? ? showname: function () {
? ? ? console.log(this);//this->obj
? ? ? console.log(this.name);//zhangsan
? ? }
? }
? obj.showname();
var obj = {
? name: 'zhangsan',
? showname: function () {
? ? console.log(this);
? ? console.log(this.name);
}
}
obj.showname();
? !function () {
? ? console.log(this);//window
? }();
? var obj1 = {
? ? name: 'zhangsan',
? ? obj2: {
? ? ? age: 19,
? ? ? show: function () {
? ? ? ? console.log(this);//this->obj2
? ? ? ? console.log(this.name);//undefined
? ? ? }
? ? }
? }
? obj1.obj2.show();
?
!function () {
? console.log(this);
}();
var obj1 = {
? name: 'zhangsan',
? obj2: {
? ? age: 19,
? ? show: function () {
? ? ? console.log(this);
? ? ? console.log(this.name);
? ? }
? }
}
obj1.obj2.show();
var obj1 = {
? name: 'zhangsan',
? obj2: {
? ? age:19,
? ? show: function () {
? ? ? console.log(this);
? ? ? console.log(this.name);
? ? }
? }
}
obj1.obj2.show();
總結(jié)：誰調(diào)用了函數(shù)，函數(shù)內(nèi)部的this指向誰，如果函數(shù)前面沒有對象調(diào)用，默認指向window
? 二.函數(shù)也是window的方法，var聲明變量也是window的屬性(很多時候window可以省略)
? function fn(m, n) {
? ? console.log(m + n);
? }
? fn(1, 2);//3
? window.fn(3, 4)//7
? var num = 1;
? console.log(num);//1
? console.log(window.num);//1
? console.log(num === window.num);//true
? function fn(m, n) {
? ? console.log(m + n);
? }
? fn(1, 2 );
window.fn(3,4)
var num = 1;
console.log(num);
console.log(window.num);
console.log(num === window.num);
? 三.this的應(yīng)用
? var liEles = document.querySelectorAll('li');
? for (var i = 0; i < liEles.length; i++) {//循環(huán)的目的是給每一個li元素添加事件
? ? liEles[i].onclick = function () {//點擊事件，說明循環(huán)已經(jīng)結(jié)束了
? ? ? // console.log(i);//循環(huán)的最后一次值
? ? ? // this:誰調(diào)用函數(shù)this指向誰
? ? ? // console.log(this);//指向當(dāng)前點擊的li元素
? ? ? // console.log(this.innerHTML);
? ? }
? }
? var liEles = document.querySelectorAll('li');
? for (var i = 0; i < liEles.length; i++) {//循環(huán)的目的是給每一個li元素添加事件
? ? liEles[i].onclick = function () {//點擊事件， 說明循環(huán)已經(jīng)結(jié)束了
? ? ? console.log(i);//循環(huán)的最后一次值
? ? ? // this:誰調(diào)用函數(shù)this指向誰
? ? ? console.log(this);//指向當(dāng)前點擊的li元素
? ? ? console.log(this.innerHTML);
? ? }
? }
? 四.總結(jié)this的特點
? 1.只要出現(xiàn)的function(函數(shù))，里面就可以存在this。
? 2.this不看聲明，看調(diào)用，誰調(diào)用函數(shù)，函數(shù)里面的this指向誰。
四.總結(jié)this的特點
1.只要出現(xiàn)的function(函數(shù)), 里面就可以存在this。
2.this不看聲明,看調(diào)用，誰調(diào)用函數(shù)，函數(shù)里面的this指向誰。
