2,箭头函数
function(){ } --- ()=>{ } 箭头函数
function(e){ } --- e =>{ } 箭头函数
function(){ 一行} --- ()=>一行 箭头函数
function(e){ 一行} --- e =>一行 箭头函数
特点:1,this指向与一般的function函数不同
声明式 function fun(){ } this指向,window
赋值式 var fun = function(){ } this指向,window
forEach()循环 this指向,window
定时器,延时器 setInterval(function(){ } , 时间)
this指向,window
对象中的函数 const obj = { fun:function(){ }}
this指向,obj对象
事件处理函数 标签.addEventListener(事件类型,function(){ })
this指向,标签对象
箭头函数的this指向,是父级程序的this指向
如果父级程序有this指向,指向向的就是父级程序的this指向
如果父级程序没有this指向(对象,数组是没有this),指向的是window
2,箭头函数,无法改变this指向
3,改变this指向
函数.call(参数1,其他参数...)
立即执行函数,并且改变函数的this指向为参数1表示的内容
其他参数,是原始函数的实参,多个实参使用逗号间隔
函数.apply(参数1,[数组参数])
立即执行函数,并且改变函数的this指向为参数1表示的内容
数组参数,是原始函数的参数,多个参数以数组的单元的形式存储
函数.bind(参数1)
不会立即执行函数,而是生成一个新的函数
新函数,参数,程序内容,都与原始函数相同
只是this改变为参数1表示的内容
一.箭头函数
<div>我是div</div>
所谓的箭头函数
是函数的另一种语法形式
const fun = function(){ } 普通函数
const fun = ()=>{ } 箭头函数
将匿名函数的部分,从 function(){ } 写成 ()=>{ } 的形式
如果函数只有一个参数,可以不写()
const fun = function(e){ } 普通函数
const fun = e => { } 箭头函数
如果执行体中只有一行代码,可以不写{ }
const fun = e=>{ console.log(e)} 普通箭头函数
const fun = e=> console.log(e) 不写{ }箭头函数
const oDiv = document.querySelector('div');
// 普通函数
oDiv.addEventListener('click' , function(){
console.log('我是div标签')
})
// 箭头函数
oDiv.addEventListener('click' , ()=>{
console.log('我是div标签');
})
// 只有一个参数，可以不写(),直接定义一个参数
oDiv.addEventListener('click' , e=>{
console.log(e);
})
// 只有一行代码,不写{}
oDiv.addEventListener('click' , e=>console.log(e) )
二.箭头函数的this指向
<div>1234</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
箭头函数中的this指向
为什么要有箭头函数?
是为了配合明天要讲的面向对象和构造函数
在箭头函数中,this指向有特殊的意义,专门可以用来配合构造函数和面向对象编程思想
在箭头函数中,this指向,父级程序的this指向
如果父级程序有this指向,那么箭头函数指向的就是父级程序的this
如果父级程序没有this指向,那么指向的就是window
关于this的总结
1,普通的function函数
声明式 --- window
赋值式 --- window
forEach循环 --- window
定时器,延时器 --- window
对象中的函数 --- 对象本身
事件绑定事件处理函数 --- 绑定事件的标签
2,箭头函数的this指向
父级程序的this指向
如果父级程序有this指向(父级程序也是函数),this指向的就是父级程序的this指向
如果父级程序没有this指向(数组,对象....),this指向的是window
复习this指向
***************普通函数的this指向**************
声明式,赋值式/匿名函数,对象中函数,绑定的事件处理函数
this都是指向的调用函数时,之前定义的内容
1,声明式 --- 指向的是window
function fun1(){
console.log(this);
}
fun1();
2,匿名函数/赋值式 --- 指向的是window
const fun2 = function(){
console.log(this);
}
fun2();
3,定义在对象中的函数 --- 指向的是对象
const obj = {
fun3 : function(){
console.log(this);
}
}
obj.fun3();
4,绑定的事件处理函数 --- 指向的是绑定事件处理函数的标签
const oDiv = document.querySelector('div');
// oDiv.onclick = function(){
// console.log(this);
// }
oDiv.addEventListener('click' , function(){
console.log(this);
})
*******************箭头函数的this指向********************
与普通函数的this指向是有区别的
箭头函数中,this的指向是父级程序的this指向
当前的程序,箭头函数的父级程序,
如果没有，则this指向的就是window
oDiv.addEventListener('click' , ()=>{
console.log(this);
})
// 对li进行操作
const oLis = document.querySelectorAll('li');
oLis.forEach(function(item,key){
// console.log(this); // 输出的是forEach的函数的this指向
// 箭头函数的this,是父级程序,forEach()的this,是window
item.addEventListener('click' , ()=>{
// console.log(key,this);
})
})
forEach()中 函数的this指向,就是window
const arr = [1,2,3,4,5,6];
arr.forEach(function(){
console.log(this);
})
const obj = {
// 普通函数,this指向对象
fun1 : function(){ console.log(this)},
// 箭头函数this指向是,父级程序
// 父级程序是对象
// 只有函数有this,obj对象没有this
// 父级程序没有this,指向的是window
fun2 : ()=>{ console.log(this)},
// fun3是一个普通函数,this指向的是obj对象
fun3 : function(){
// fun4,是一个箭头函数,this指向的是父级程序的this指向
// 父级程序是fun3,fun3的this是对象,fun4箭头函数的this也是对象
const fun4 = ()=>{ console.log(this)};
fun4();
}
}
obj.fun1();
obj.fun2();
obj.fun3();
三.改变this指向
重点:箭头函数,不能改变this指向,只有普通function函数,能改变this指向
改变this指向的方法
1, call()方法
语法: 函数.call(参数1,其他参数....可以是多个或者没有 )
作用: 调用并且执行函数,同时,将函数的this指向,定义为指定的内容(参数1)
参数1,是改变的this的指向
其他参数,是原始函数的实参,原始函数有几个形参,此时就要对应的输入几个实参,没有形参,就没有实参
2, apply()方法
语法: 函数.apply(参数1,参数2) 只有两个参数
参数1:改变的this的指向内容
参数2:原始函数的实参,必须是一个数组的形式,将实参定义成数组的单元
其他用法和作用于 .call是相同的
总结: call方法与apply方法,作用,效果,都是完全一致的
只是对于原始函数的参数赋值方法,不同
call方法是通过其他多个参数来实现
apply方法是通过一个数组参数,来实现
两个方法没有本质的区别,爱用哪个用那个
3, bind()方法
语法: const 变量 = 函数.bind(参数1);
不是立即执行函数（下一篇博客有介绍 立即执行函数）
生成一个新的函数,这个新的函数是改变this指向之后的新的函数
参数1,定义的要改变的的this指向
其他参数,一般不定义,是使用函数原有的形参
总结:
call apply 都是立即执行函数
参数1,都是改变的this指向
其他参数,是原始函数的形参(可以有,也可以没有)
bind 不是立即执行函数,是生成一个新的函数
参数1,是改变的this指向
就使用原始函数的形参
const obj1 = {
name:'张三',
age:18,
sex:'男',
}
const obj2 = {
name:'李四',
fun2 : function(){
console.log(this);
}
}
// 对象中的函数,this指向的是这个对象,obj2
obj2.fun2();
// 改变this指向,指向的是obj1这个对象
// 代用,并且执行fun2这个函数,同时将fun2的this指向,从原始的obj2,改变为obj1
obj2.fun2.call(obj1);
// 带有参数的函数,this指向的改变
// 定义的带有参数的普通函数
function fun3(name,age,sex){
console.log(name,age,sex,this);
}
// 执行时,输出实参,此时this指向是window
fun3('张三',18,'男');
// 改变this指向 , call方法
fun3.call(obj1,'李四',20,'女');
// 改变this指向 , apply方法
fun3.apply(obj1 , [ '王五' , 20 , '不知道' ])
// bind方法,不是立即执行函数,而是定义生成一个新的函数
// 新生成的函数,this指向是参数1
// 新生成的函数,形参是原始函数fun3的形参
const fun4 = fun3.bind(obj1);
fun4('王二麻子' , 100 , '不详');
四.注意事项特别说明
面向对象和面向过程
从面向过程,改造成面向对象
1,获取的数据,标签对象,要以参数的形式,定义给构造函数和实例化对象
获取标签对象时,一般获取父级,传参父级,在构造函数中,通过父级标签,获取子级标签独享
2,必须非常非常非常注意 this的指向,一般在面向对象中 都是使用箭头函数
如果万一不能清楚地知道this指向,可以先输出 this
3,其他步骤和思路基本相同,没有区别
总结:
1,改不改箭头函数,看内部是否需要 指向实例化对象的this
如果需要,可以改箭头函数,或者是提前存储this指向
如果不许需要,改不改箭头函数都行
一切以实现程序为最终需求,程序能执行就可以
2,之前面向过程的是参数,数据等,
现在是面向对象编程,要在对象的属性中,定义参数数据
也就是通过 构造函数 this.属性 = 属性值 语法来定义需要获取的参数数据
3,定义在构造函数方法中的一些变量数据,并不是定义在实例化对象中的属性
没有必须写成 this.属性 = 属性值 的形式
只要写成普通的变量定义即可
使用时,也是直接使用变量,不需要添加this
4,在构造函数的方法中,调用其他的函数方法
语法形式 应该是 实例化对象.函数方法名称()
在构造函数中,使用this来指向实例化对象,写成 this.函数方法名称()
