文章目錄

• • JavaScript進(jìn)階2-學(xué)習(xí)筆記
  • • this指針
    • 如何改變this指向
    • 事件委托、事件冒泡

JavaScript進(jìn)階2-學(xué)習(xí)筆記

this指針

This是什么？
this是Javascript語言的一個(gè)關(guān)鍵字。 它代表函數(shù)運(yùn)行時(shí)，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象，只能在函數(shù)內(nèi)部使用，隨著函數(shù)使用場(chǎng)合的不同，this的值會(huì)發(fā)生變化，指向是不確定的，也就是說是可以動(dòng)態(tài)改變的；但是有一個(gè)總的原則，那就是this指的是，調(diào)用函數(shù)的那個(gè)對(duì)象。 （this 一般情況下，都是指向函數(shù)的擁有者）

//this指針 //1）簡(jiǎn)單函數(shù)function test(){console.log(this) //它代表函數(shù)運(yùn)行時(shí)，自動(dòng)生成一個(gè)內(nèi)部對(duì)象};test(); //指向的是調(diào)用者window.test();//嚴(yán)格模式function test(){"use strict"; //嚴(yán)格模式 console.log(this) //undefined};test();//2) 數(shù)組function f1(){console.log(this)};var arr = [f1,2,3];arr[0](); // this= arr arr是調(diào)用者 obj.name obj[name]var f2 = arr[0]; //數(shù)組賦值處理后f2(); //指向的是調(diào)用者window window.f2();//3）內(nèi)置函數(shù) setTimeout function f1(){console.log(this)};//延遲執(zhí)行setTimeout(f1,1000); //window//4)回調(diào)函數(shù)var a = [1,2,3,5].filter(function(item,index){console.log(this) //window});a();//5)對(duì)象中var obj = {};obj.name = 123;obj.action = function(){console.log(this); // // this指向obj};function f1(){console.log(this) //this指向obj};obj.action(); // this指向objobj.f2 = f1;obj.f2(); //5-1) 字面量var obj3 = {name:'amy',action:function(){console.log(this)}};obj3.action();//6)構(gòu)造函數(shù)function F5(name,age){this.name = name;this.age = age;this.action = function(){console.log(this)}};var f5 = new F5('a',2);f5.action(); //this 指向的是新創(chuàng)建的對(duì)象, 而不是構(gòu)造函數(shù)本身。

如何改變this指向

//如何改變this指向 apply callvar a = 10;function f6(name,age){return this.a +" " +name +" "+age;};f6('a',10); // 10 a 10var obj6 ={a:100,action:f6};obj6.action('a',10); // 100 a 10//修改this指向 //1) obj6.action 指向windowconsole.log(obj6.action.call(window,'w',10)); // 10 w 10console.log(obj6.action.apply(this,['w',10])); // 10 w 10console.log(obj6.action.apply(obj6,['w',10])); // 100 w 10//bind() 綁定thisvar a = 10;function f1(name,age){return this.a +" " +name +" "+age;};var obj1 ={a:11111,action1:f1};var obj2 ={a:22222,action2:f1};var a1 = f1.bind(obj1,'a',10);a1() // f1()無調(diào)用者 但是綁定obj1, this指向就是obj1console.log(a1.call(obj2,'a',10)); //11111 a 10 綁定后不能改變thisconsole.log(a1.apply(obj2,['a',10])); //面試題 //在函數(shù)自執(zhí)行里，this 指向的是 window 對(duì)象var number = 1;var obj = {number:2,showNumber:function(){this.number = 3;(function(){console.log(this.number);})();console.log(this.number);}};obj.showNumber(); //1 3

事件委托、事件冒泡

//事件委托 冒泡 //e.target e.currentTarget this //event 對(duì)象代表事件的狀態(tài) //e.target 觸發(fā)事件 //e.currentTarget 綁定事件 //target是真正發(fā)生事件的DOM元素，而currentTarget是當(dāng)前事件發(fā)生在哪個(gè)DOM元素上 //this 綁定事件document.querySelector(".div1").onclick = function(e){// e.target.style.color = "red";// e.currentTarget.style.color = "red";this.style.color = "red";}

//事件冒泡和捕獲 document.querySelector(".d1").onclick = function(e){console.log('d1');};document.querySelector(".d2").onclick = function(e){console.log('d2');};document.querySelector(".d3").onclick = function(e){console.log('d3');e.stopPropagation(); //阻止事件冒泡};

//事件委托 //委托給別人來處理// var ul = document.querySelector(".ul");// var _li = ul.getElementsByTagName("li");// for(var i=0;i<_li.length;i++){// _li[i].onclick = function(){// console.log(this.innerHTML);// }// };//委托 將事件綁定在父對(duì)象上 點(diǎn)擊子節(jié)點(diǎn)通過事件冒泡到父來處理var ul = document.querySelector(".ul");ul.onclick = function(e){if(e.target.nodeName=='LI'){ //針對(duì)LI元素來處理console.log(e.target.innerHTML);}}

【可參考】https://www.cnblogs.com/Chen-XiaoJun/p/6210987.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript进阶2-学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。