javascript知识巩固------call()、apply()、bind()

最新推荐文章于 2024-11-08 16:09:18 发布

wennianzhu

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量119

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/wennianzhu/article/details/107532019

版权

call()方法

call方法可以调用函数，例如fn.call()；
call方法可以改变这个函数的this指向，例如fn.call(thisArg,arg1,arg2,...)；
主要应用：call还能够实现继承-----借用父构造函数继承属性；

	//1.父构造函数
	function Father(uname,age) {
		//this指向父构造函数的对象实例
		this.uname = uname
		this.age = age
	}
	//2.子构造函数
	function Son(uname,age,score) {
		//this指向子构造函数的实例对象
		Father.call(this,uname,age)
		this.score=score
	}
	let son = new Son('Tony',18,59)
	console.log(son)

利用原型对象继承方法（这儿跟call关系不大，继承方法跟继承属性挨着写方便记忆）。

	//1.父构造函数
	function Father(uname,age) {
		//this指向父构造函数的对象实例
		this.uname = uname
		this.age = age
	}
	Father.prototype.money = function() {
		console.log(10000)
	}
	//2.子构造函数
	function Son(uname,age,score) {
		//this指向子构造函数的实例对象
		Father.call(this,uname,age)
		this.score=score
	}
	//Son.prototype = Father.prototype 这样直接赋值会有问题，如果修改子原型对象，父原型对象也会跟着一起变化，这样是不合理的。
	Son.prototype = new Father()
	//如果利用对象的形式修改了原型对象，别忘了利用constructor指回原来的构造函数
	Son.prototype.constructor = Son
	let son = new Son('Tony',18,59)
	console.log(son)
	console.log(Son.prototype.constructor)

在这里插入图片描述

apply()方法

apply()方法调用一个函数-----fun.apply(thisArg,[argsArray])
thisArg：在fun函数运行时指定的this值
argsArray：传递的值，必须包含在数组里面
主要应用：比如我们可以利用apply借助于数学内置对象求最大值

	var arr = [1,16,3,99,4]
	var max = Math.max.apply(Math,arr)
	console.log(max)

bind()方法

fun.bind(thisArg,arg1,arg2,...)
bind()方法不会调用函数，但是能改变函数内部的this指向。（bind方法返回的是一个函数，后续需要手动调用）
返回由指定的this值和初始化参数改造的原函数拷贝

	var o = {
		name:'wnz'
	}
	function fn(){
		console.log(this)
	}
	var f = fn.bind(o)
	f()

主要应用：如果有的函数我们不需要立即调用，但是又想改变这个函数内部的this指向，此时就可以使用bind方法。
例如：我们有一个按钮，当我们点击了之后，就禁用这个按钮，3秒钟之后开启这个按钮。（类似于页面登陆时发送手机验证码，60s之后才能够重新获取）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button>click</button>
	<script>
		var btn = document.querySelector('button');
		btn.onclick = function() {
			this.disabled = true;//这个this指向的是btn这个按钮
			// var that = this
			setTimeout(function() {
				//定时器函数里面的this指向的是window
				// that.disabled = false
				this.disabled = false//此时定时器函数里面的this指向的是btn
			}.bind(this),3000)//这个this指向的是btn这个按钮
			//这里使用bind是非常好的，因为我们并不想改变this指向后立即调用函数，而是让定时器去控制函数的调用。
		}
	</script>
</body>
</html>