js中call、apply、bind方法(转摘整理)

js中call、apply、bind方法(转摘整理)call、apply、bind方法的由来在js中所有的函数都是Function的实例,而且对于Function来说,它的原型即Function.

欢迎大家来到IT世界,在知识的湖畔探索吧!

call、apply、bind方法的由来

在js中所有的函数都是Function的实例,而且对于Function来说,它的原型即Function.prototype中含有很多内容,其中call、apply、和bind方法就是Function原型中的方法,根据原型链规则,所有函数都可以使用原型中的属性和方法,所以所有的函数都可以使用call、apply、和bind。

call、apply、bind方法的作用/定义

都是用来改变this的指向。

call、apply:调用一个对象的一个方法,用另一个对象替换当前对象。例如:B.apply(A,arguments);即A对象应用B对象的方法。

function getInfo(age){
	return '我的姓名是'+this.name+'我的年龄'+age
}

欢迎大家来到IT世界,在知识的湖畔探索吧!

上面代码中,如果我以getInfo(18)来直接调用,返回结果=>我的姓名是 我的年龄18
因为函数在寻找
this.name时并没有找到,所以this.name为undefined
接下来我们定义一个对象来调用函数:

欢迎大家来到IT世界,在知识的湖畔探索吧!function getInfo(age){
	return '我的姓名是'+this.name+'我的年龄'+age
}

let person = {
	name:'xiaoming',
	sex:'男'
}
//通过person对象调用getInfo方法
getInfo.call(person,18)
getInfo.apply(person,[18])

getInfo.bind(person,18)() //与前两者不同,bind返回的是一个函数体,因此需要()进行调用
var fbind=getInfo.bind(person,18);//bind()不能调用函数
fbind();//此时才调用函数
//  上述三种不同的写法,返回值相同
	//	return: 我的姓名是xiaoming,我的年龄18

getInfo("男");//姓名为undefined,性别为男
person.getInfo("男");//报错
//person并没有getInfo方法。

bind 和 call/apply 有一个很重要的区别一个函数被 call/apply 的时候,会立即执行函数,但是 bind 会创建一个新函数,不会立即执行

call、apply、bind方法的应用场景

//数组之间追加
var array1 = [12 , "foo" , {name "Joe"} , -2458]; 
var array2 = ["Doe" , 555 , 100]; 
Array.prototype.push.apply(array1, array2); 
/* array1 值为  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */
欢迎大家来到IT世界,在知识的湖畔探索吧!//获取数组中的最大值和最小值
var  numbers = [5, 458 , 120 , -215 ]; 
var maxInNumbers = Math.max.apply(Math, numbers),   //458
    maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458
//利用call()判断数据类型
console.log(Object.prototype.toString.call("qq"))            // [Object String] 返回值都是字符串类型
console.log(Object.prototype.toString.call(12))              // [object Number]
console.log(Object.prototype.toString.call(false))           // [object Boolean]
console.log(Object.prototype.toString.call(undefined))       // [object Undefined]
console.log(Object.prototype.toString.call(null))            // [object Null]
console.log(Object.prototype.toString.call(function(){}))    // [object Function]
console.log(Object.prototype.toString.call([]))              // [object Array]
console.log(Object.prototype.toString.call({}))              // [object Object]

this对象的理解

  • this ,函数执行的上下文,总是指向函数的直接调用者(而非间接调用者),可以通过 apply , call , bind 改变 this 的指向。
var x =3;
function test(){
  alert(this.x);//this指window
}
test();//3 ,this指全局对象

var o = {
  x:1,
  m:test 
};
o.m(); // 1 //--》this指上级对象
  • 如果有 new 关键字,this 指向 new 出来的那个对象。
function test(){
    console.log(this);
  }
  var o = new test();
       test();
//可以看出o代表的不是全局对象
  • 在事件中,this 指向触发这个事件的对象,特殊的是,IE 中的 attachEvent 中的 this 总是指向全局对象 window 。
  • 对于匿名函数或者直接调用的函数来说,this 指向全局上下文(浏览器为 window ,NodeJS 为 global),剩下的函数调用,那就是谁调用它, this 就指向谁。
  • 对于 es6 的箭头函数,箭头函数的指向取决于该箭头函数声明的位置,在哪里声明, this 就指向哪里。

原文链接:https://blog.csdn.net/hanyanshuo/article/details/110222695?utm_source=app&app_version=4.13.0

https://blog.csdn.net/yaojxing/article/details/71942496?utm_source=app&app_version=4.13.0

https://www.ruanyifeng.com/blog/2018/06/javascript-this.html //js中this原理

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/30262.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信