javaScript改变this指向的三种方法

javaScript提供了一些函数方法帮助我们处理函数内部this的指向问题，常用的有bind()、call()、apply()三种方法

1.call() 方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的this指向。

fun.call(arg,arg1,arg2,...)

arg:在fun函数运行是指定的this值

arg1,arg2:传递的其他参数

返回值就是函数的返回值。

使用场景：如果想要改变this的指向，调用这个函数的时候，可以使用call,比如继承

   var obj = {name: 'lingnan'}function fn(a, b) {console.log(this);console.log(a + b);}fn.call(obj, 1, 2)// call第一个作用可以调用函数，第二个可以改变函数内的this指向// call的主要作用是可以实现继承function Father(name, age, sex) {this.name = namethis.age = agethis.sex = sex}function Son(name, age, sex) {// console.log(this);Father.call(this, name, age, sex)}const son = new Son('张三', 23, '男')console.log(son);//{name: '张三', age: 23, sex: '男'}

2.apply方法

fun.apply(arg,[argArr])

arg:在fun函数运行时this的值

argArray:传递的值，必须包含在数组里面

apply主要更数组有关系，比如使用Math.max()求数组的最大值

 const obj = {name: '李四',age: 23}function fn(arr) {console.log(this);console.log(arr);}const str  = 'pink'fn.apply(obj, [str])// 也是可以调用函数 也可以改变函数内部的this指向// 注意：apply的参数是数组（伪数组）//  apply 的主要应用场景： 我们可以利用apply借助于数学内置对象求数组最大值 const arr = [34,202,42,33]const nameArr = ['张三','李四']var max = Math.max.apply(Math,arr)var min = Math.min.apply(Math,arr)console.log(max,min);var max1 = Math.max(...arr)var min1 = Math.min(...arr)console.log(max,min1);

3.bind方法

bind()方法的话并不会调用函数，但是能改变函数内部的this指向

fun.bind(arg,arg1,arg2,...)

arg:在fun函数运行时指定的this值

arg1,arg2:传递的其他参数

返回值由指定的this值和初始化参数改造的原函数拷贝

所以当我们只是想要改变this指向，并且不想调用这个函数的时候，可以使用bind方法

 <button>点击1</button>
<script>const obj = {name:'张三'}function fn(a,b){console.log(this);console.log(a+b);}// fn.bind(obj,1,2)此时的fn函数未调用，而是产生了改变this之后的新函数const f = fn.bind(obj,1,2)//返回的是原函数改变this之后产生的新函数f()//新函数被调用，this指向objvar btn =  document.querySelector('button')// btn.onclick = function(){//       this.disabled = true//       setTimeout(function(){//             console.log(this);//这时的this是指向window的，所以禁用的按钮恢复不了//             this.disabled = false//       },2000)// }btn.onclick = function(){console.log(this)//这里的this指向button元素节点this.disabled = truesetTimeout(function(){console.log(this);//这时的this是指向window的，所以禁用的按钮恢复不了this.disabled = false}.bind(this),2000)//这里的this和上面的this一样指向button元素节点，所以button按钮可以恢复
//注：还有一种方式就是setTimeout里面使用箭头函数:()=>{},此时的this指向的就是button}</script>

还有，如果call、apply、bind接收到的第一个参数是null、undefined时，可以忽略该参数，则此时只是函数调用。

例如：

function foo () {console.log(this.a)
}
var a = 2
foo.call()
foo.call(null)
foo.call(undefined)

输出：

2
2
2

好了，改变this指向的三种方法介绍到这里，如有错误，请读者纠正，谢谢！

javaScript改变this指向的三种方法相关推荐

java浮点数化为整数_[Java教程]javascript浮点数转换成整数三种方法
[Java教程]javascript浮点数转换成整数三种方法 0 2014-06-24 04:00:27 将浮点数转换成整数方法有很多,分享三种常用方法. Summary 暂时我就想到3个方法而已.如 ...
JS行间改变css的方法,js改变css样式的三种方法推荐
共用代码: this is a div var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:25 ...
在JavaScript中重复字符串的三种方法
In this article, I'll explain how to solve freeCodeCamp's "Repeat a string repeat a string" ...
在JavaScript中反转字符串的三种方法
This article is based on Free Code Camp Basic Algorithm Scripting "Reverse a String" 本文基于F ...
JS中this的指向与改变this指向的三个方法
目录一.this指向的分类 1.全局函数的调用 2.对象中函数的调用 3.setTimeout与setInterval中的this 4.事件绑定中的this 5.箭头函数中的this 6.构造函数中 ...
JavaScript弹出对话框的三种方法
三种方法 alert(); 最简单,将alert();括号内的内容弹出. confirm(); 与alert();类似,包含确认和取消按钮,点击确定confirm();方法会返回true,点击取消co ...
javascript面象对象编程的三种方法
<script> /* * 第一种,函数即类,利用prototype来模拟对象的方法,简单 ,不包括继承 */ //-------------- ...
js 改变this指向的几种方法（个人学习笔记）
1.call()和apply() 两中方法都能改变this指向,很类似,区别主要是第二个以后参数, call():第一个参数表示要把this指向的新目标,第二个之后的参数其实相当于传参,参数以,隔开 ...
静态html页面传递参数,javascript静态页面传值的三种方法分享
一:JavaScript静态页面值传递之URL篇能过URL进行传值.把要传递的信息接在URL上.Post.htm function Post() { //单个值 Read.htm?username=b ...

javaScript改变this指向的三种方法

javaScript改变this指向的三种方法相关推荐

最新文章

热门文章