JavaScript进阶2-学习笔记

文章目录

JavaScript进阶2-学习笔记
- this指针
- 如何改变this指向
- 事件委托、事件冒泡

JavaScript进阶2-学习笔记

this指针

This是什么？
this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用，随着函数使用场合的不同，this的值会发生变化，指向是不确定的，也就是说是可以动态改变的；但是有一个总的原则，那就是this指的是，调用函数的那个对象。（this 一般情况下，都是指向函数的拥有者）

//this指针
//1）简单函数function test(){console.log(this) //它代表函数运行时，自动生成一个内部对象};test();  //指向的是调用者window.test();//严格模式function test(){"use strict";      //严格模式 console.log(this)  //undefined};test();//2) 数组function f1(){console.log(this)};var arr = [f1,2,3];arr[0]();  //  this= arr   arr是调用者   obj.name  obj[name]var f2 = arr[0];  //数组赋值处理后f2();  //指向的是调用者window    window.f2();//3）内置函数  setTimeout  function f1(){console.log(this)};//延迟执行setTimeout(f1,1000);    //window//4)回调函数var a = [1,2,3,5].filter(function(item,index){console.log(this)   //window});a();//5)对象中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)构造函数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 指向的是新创建的对象, 而不是构造函数本身。

如何改变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()无调用者  但是绑定obj1,  this指向就是obj1console.log(a1.call(obj2,'a',10));   //11111 a 10    绑定后不能改变thisconsole.log(a1.apply(obj2,['a',10])); //面试题
//在函数自执行里，this 指向的是 window 对象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 对象代表事件的状态
//e.target 触发事件
//e.currentTarget   绑定事件
//target是真正发生事件的DOM元素，而currentTarget是当前事件发生在哪个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);//      }//  };//委托 将事件绑定在父对象上  点击子节点通过事件冒泡到父来处理var ul = document.querySelector(".ul");ul.onclick = function(e){if(e.target.nodeName=='LI'){    //针对LI元素来处理console.log(e.target.innerHTML);}}

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

JavaScript进阶2-学习笔记相关推荐

7 种 Javascript 常用设计模式学习笔记
7 种 Javascript 常用设计模式学习笔记由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式本文的 ...
JavaScript 权威指南-学习笔记（一）
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! JavaScript 权威指南-学习笔记 ...
JavaScript进阶5-学习笔记
文章目录 JavaScript进阶5-学习笔记例子 JavaScript进阶5-学习笔记参考理解:https://blog.csdn.net/hhhmonkey/article/details/1 ...
JavaScript进阶4-学习笔记
文章目录 JavaScript进阶4-学习笔记递归 JavaScript进阶4-学习笔记前端: 根据Ui写页面,使用vuecli+vue---测试功能---需要数据(json,array,字符串) ...
JavaScript进阶3-学习笔记
文章目录 JavaScript进阶3-学习笔记闭包 JavaScript进阶3-学习笔记 //组件封装什么是封装? 将冗余的代码精简化例如:写代码:a页面有一个函数,b页面也需要这个函数,很多人 ...
JavaScript高级程序设计学习笔记（三）
分享一下第五章(引用类型)的笔记,内容比较多,我拆成了两部分,今天这部分是关于Object.Array.Date和RegExp类型的. 以下的笔记是书上一些我以前学习的时候,没有太重视的js基础知识, ...
vn.py全实战进阶课程学习笔记（零）
目录写在前面 MySQL数据库配置安装mysq 创建数据库 vnpy数据库配置 rqdata数据服务配置申请rqdata试用权限 vnpy参数配置 simnow仿真环境配置准备账号接口登录 ...
36篇博文带你学完opencv :python+opencv进阶版学习笔记目录
基础版学习笔记传送门 36篇博文带你学完opencv :python3+opencv学习笔记汇总目录(基础版) 进阶版笔记项目 opencv进阶学习笔记1: 调用摄像头用法大全(打开摄像头,打开摄像 ...
javascript高程3 学习笔记(二)
ECMAScript function的理解 ECMAScript 函数与其他语言函数最大的不同在于,其不介意传入多少参数以及参数的类型比如函数的形参有两个,但是调用函数传入的参数可以写一个,三个或 ...

JavaScript进阶2-学习笔记

文章目录

JavaScript进阶2-学习笔记

this指针

如何改变this指向

事件委托、事件冒泡

JavaScript进阶2-学习笔记相关推荐

最新文章

热门文章