JavaScript进阶：js的一些学习笔记-this指向,call,apply,bind,防抖,节流

文章目录

- - - 1. this指向
    - - 1. 箭头函数 this的指向
    - 2. 改变this的指向
    - - 1. call()
      - 2. apply()
      - 3. bind()
    - 3. 防抖和节流
    - - 1. 防抖
      - 2. 节流

1. this指向

1. 箭头函数 this的指向

箭头函数默认帮我们绑定外层this的值，所以在箭头函数中this的值和外层的this是一样的
箭头函数中的this引用的就是最近作用域中的this
向外层作用域下，一层一层查找this，知道有this的定义

注意：

事件回调函数使用箭头函数时，this为全局的window，因此dom事件回调函数如果里面需要用到dom对象的this，不推荐使用箭头函数

const btn = document.querySelector('button');/*btn.addEventListener('click',function(){console.log(this);// this指向btn})*/btn.addEventListener('click',()=>{console.log(this);// this 指向window
})

基于原型的面向对象也不推荐采用箭头函数

function Person(){}
Person.prototype.play = function(){console.log(this);// this 指向Person
}Person.prototype.walk = ()=>{console.log(this);// this 指向window
}const p1 = new Person();
p1.play();
p1.walk();

2. 改变this的指向

1. call()

使用call方法调用函数，同时指定被调用函数中this的值

function fn(x,y){console.log(this);// 指向windowconsole.log(x,y);
}
fn();const obj = {name:'liuze'
}fn.call(obj,1,2);
// 此时fn里边的this指向obj,1,2相当于实参

2. apply()

fun.apply(thisArg,[argsArray])

thisArg：在fun函数运行时指定的this值
argsArray：传递的值，必须包含在数组里面
返回值就是函数的返回值

function fn(x,y){console.log(this);// 指向windowconsole.log(x,y);return x+y;
}
fn();const obj = {name:'liuze'
}const res = fn.apply(obj,[1,2]);
// 此时fn函数中的this指向obj
console.log(res);
// 3

3. bind()

不会调用函数，但是能改变函数内部this的指向

fun.bind(thisArg,arg1,arg2,…)

thisArg：在fun函数运行时指定this的值
arg1，arg2：传递的其他参数
返回由指定的this值和初始化参数改造的原函数拷贝（新函数）
如果只是想改变this指向，并且不香调用这个函数的时候，可以使用bind

function fn(x,y){console.log(this);// 指向windowconsole.log(x,y);return x+y;
}
fn();const obj = {name:'liuze'
}const fun2 = fn.bind(obj,1,2);
// 此时fn函数中的this指向obj
console.log(fun2());

3. 防抖和节流

1. 防抖

单位时间内，频繁触发事件，只执行最后一次

使用场景

搜索框搜索输入，只需用户最后一次输入完，再发送请求。

利用防抖来处理-鼠标划过盒子显示文字

<!DOCTYPE html>
<html>
<head><title>javascript</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 200px;height: 200px;background-color: red;margin: 0 auto;line-height: 200px;text-align: center;}</style>
</head>
<body><div class="box">1</div>
</body><script type="text/javascript">const box = document.querySelector('.box');var i = 1;box.addEventListener('mousemove',function(){box.innerHTML = i ++;})</script>
</html>

运行结果：
在这里插入图片描述

实现方式：

lodash提供的防抖来处理

const box = document.querySelector('.box');
var i = 1;
function mouseMove(){box.innerHTML = i ++;
}
box.addEventListener('mousemove',_.debounce(mouseMove,500))
// 1. 利用lodash库实现防抖，500ms之后采取+1

手写一个防抖函数来处理

const box = document.querySelector('.box');
var i = 1;
var timer = null;
box.addEventListener('mousemove',function(){if(timer != null){clearTimeout(timer);}timer = setTimeout(()=>{box.innerHTML = i++;},500);// 休眠500ms
})

运行结果：

在这里插入图片描述

2. 节流

单位时间内，频繁触发事件，只执行一次

实现方式：

利用lodash提供的节流来实现

const box = document.querySelector('.box');
var i = 1;
function mouseMove(){box.innerHTML = i++;
}
box.addEventListener('mousemove',_.throttle(mouseMove,3000));

手写一个防抖函数来处理

const box = document.querySelector('.box');
var i = 1;
var timer = null;	
box.addEventListener('mousemove',function(){if(!timer){timer = setTimeout(function(){box.innerHTML = i++;timer = null;},3000);}
});