Function call,apply, bind 使用详解

call() 可以改变函数的this指向,可以调用函数 也可以继承函数

apply(),接收多个参数 第一个this,第二个参数为数组

bind() 不会执行函数,但会返回调用函后的this指向 也可以传参数


一、call(this, arg1, arg2, …)

是什么?

call() 提供新的 this 值给当前调用的函数/方法。你可以使用 call 来实现继承:写一个方法,然后让另外一个新的对象来继承它(而不是在新对象中再写一次这个方法)。

1.this

可选的。在 function 函数运行时使用的 this 值。请注意,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 null 或 undefined 时会自动替换为指向全局对象,原始值会被包装。

2.arg1, arg2

指定的参数列表。

二、使用方法

代码如下(示例):

function as(){

console.log(this);

console.log('11');

}

as.call() //函数调用 //第一次调用指向window

let obj = {a:1,b:2};

as.call(obj) //this指向到 obj

2.call多个值

代码如下(示例):

		function as(){
		
		console.log(this); //{a: 1, b: 2}
		// 这个的arguments 可用在函数接收的形参改为ES6的 ... 来收集参数 效果是一样的
		console.log(arguments); //Arguments(3) [Window, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
		}
		let obj = {a:1,b:2};
		as.call(obj,this,2,3) //this指向到 obj

二、apply(thisArg, [argsArray])

是什么?

在调用一个存在的函数时,你可以为其指定一个 this 对象。 this 指当前对象,也就是正在调用这个函数的对象。 使用 apply, 你可以只写一次这个方法然后在另一个对象中继承它,而不用在新对象中重复写该方法。

apply 与 call() 非常相似,不同之处在于提供参数的方式。apply 使用参数数组而不是一组参数列表

你也可以使用 arguments对象作为 argsArray 参数。 arguments 是一个函数的局部变量。 它可以被用作被调用对象的所有未指定的参数

1.this

必选的。在 func 函数运行时使用的 this 值。请注意,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 null 或 undefined 时会自动替换为指向全局对象,原始值会被包装。

2。argsArray

可选的。一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined,则表示不需要传入任何参数。

一、apply和内置函数

代码如下(示例):

//获取最大值ES5
Math.max().apply(this[1,2,12,1])

//获取最大值ES6
Math.max(...[1,2,12,1])

三 bind(thisArg[, arg1[, arg2[, …]]])

不会执行函数,但是会去改变函数的this指向,但会返回调用函后的this指向 也可以传参数

thisarg

调用绑定函数时作为 this 参数传递给目标函数的值。 如果使用new运算符构造绑定函数,则忽略该值。当使用 bind 在 setTimeout 中创建一个函数(作为回调提供)时,作为 thisArg 传递的任何原始值都将转换为 object。如果 bind 函数的参数列表为空,或者thisArg是null或undefined,执行作用域的 this 将被视为新函数的 thisArg。

[, arg1[, arg2[, …]]]

当目标函数被调用时,被预置入绑定函数的参数列表中的参数。


function sun(a,b,c){
			console.log(this);
			console.log(a,b,c);
			
			this.arg =  arguments
			return a+b+c;
		}
		
		function Ths(){}
		
		let newSun =  sun.bind(Ths,[1,2,3,4])  // 不会执行 只会把this 指向改变 指向为Ths函数 
		console.log(newSun()); //1,2,3,4undefined,undefined
		
二个数组求和 使用 bind
		function num(){
			console.log(this);
			console.log(arguments instanceof Array); // false
			console.log([...arguments] instanceof Array); // true
			let str = this.list.join('+'),newStr=[...arguments].join('+');
			return (eval(str)+eval(newStr));
		}
		
		objThis = {
			list:[1,2,3,45,6,7,7,50*10]
		}
		
		let newNum = num.bind(objThis,50,200) // 不会执行
		
		console.log(newNum()); // 执行  821
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值