调用方式 | 强行改变 this 指向的调用方式 |
---|---|
fn( ) | fn.call( ) |
obj.fn( ) | obj.fn.call( ) |
参数:call(你要改变的 this 指向, 给函数传递参数, 给函数传递参数, …)
作用:就是改变函数内部的 this 指向
特点:直接调用函数,写完以后,函数就执行了
// call()
function fn(a, b, c) {
console.log(this) // this 指向
console.log(a)
console.log(b)
console.log(c)
}
fn(10, 20, 30) // 标准调用 this -> window
console.log('===============================')
// 使用 call 改变 this 指向
// 我准备的几个数据, 为了让你看到 this 指向确实改了
var obj = { name: '我是 obj 对象' }
var arr = [1, 2, 3, 4, 5]
var num = 100
var str = 'hello world'
// 本次调用 fn 的时候, 把函数内部的 this 改变成了 obj
// 100 是传递进去的第一个参数
// 200 是传递进去的第二个参数
fn.call(obj, 100, 200, 300) // this -> obj
console.log('===============================')
// 本次调用 fn 的时候, 把函数内部的 this 改成了 arr
// 100 是传递进去的第一个参数
// 200 是传递进去的第二个参数
fn.call(arr, 100, 200, 300) // this -> arr
console.log('===============================')
// 本次调用 fn 的时候, 把函数内部的 this 改成了 num
// 100 是传递进去的第一个参数
// 200 是传递进去的第二个参数
fn.call(num, 100, 200, 300) // this -> num
console.log('===============================')
// 本次调用 fn 的时候, 把函数内部的 this 改成了 str
// 100 是传递进去的第一个参数
// 200 是传递进去的第二个参数
fn.call(str, 100, 200, 300) // this -> str
console.log('===============================')
// 本次调用 fn 的时候, 把函数内部的 this 改成了 100
// 200 是传递进去的第一个参数
// 第二个参数没有了
fn.call(100, 200) // this -> 100
调用方式 | 强行改变 this 指向的调用方式 |
---|---|
fn( ) | fn.apply( ) |
obj.fn( ) | obj.fn.apply( ) |
// apply
function fn(a, b) {
console.log('this: ', this)
console.log('第一个参数: ', a)
console.log('第二个参数: ', b)
console.log('================================')
}
// 准备几个数据用于改变 this 指向的时候使用
var obj = { name: '我是 obj 对象' }
var arr = [10, 20, 30, 40, 50]
var reg = /^abcd$/
var time = new Date()
// 基础调用
fn(10, 20)
// apply 改变 this 指向
// 本次调用 fn 的时候, 把函数内部的 this 指向改变成 obj
// 数组中 [0] 是给 fn 函数的第一个参数
// 数组中 [1] 是给 fn 函数的第二个参数
fn.apply(obj, [100, 200])
// 本次调用 fn 的时候, 把函数内部的 this 指向改变成 arr
// 数组中 [0] 是给 fn 函数的第一个参数
// 数组中 [1] 是给 fn 函数的第二个参数
fn.apply(arr, [1000, 2000])
// 本次调用 fn 的时候, 把函数内部的 this 指向改变成 reg
// 数组中 [0] 是给 fn 函数的第一个参数
// 数组中 [1] 是给 fn 函数的第二个参数
fn.apply(reg, [10000, 20000])
// 本次调用 fn 的时候, 把函数内部的 this 指向改变成 time
// 数组中 [0] 是给 fn 函数的第一个参数
// 数组中 [1] 是给 fn 函数的第二个参数
fn.apply(time, ['hello', 'world'])
调用方式 | 强行改变 this 指向的调用方式 |
---|---|
fn( ) | fn.bind( ) |
obj.fn( ) | obj.fn.bind( ) |
// bind()
function fn(a, b) {
console.log('this: ', this)
console.log('第一个参数: ', a)
console.log('第二个参数: ', b)
console.log('================================')
}
// 准备几个数据用于改变 this 指向的时候使用
var obj = { name: '我是 obj 对象' }
var arr = [10, 20, 30, 40, 50]
var reg = /^abcd$/
var time = new Date()
// 直接调用
fn(10, 20) // 函数调用了
// 使用 bind 改变一下 this 指向
// 本次 bind 会把 fn 函数复制一份, 把里面的 this 改变成 obj
// 100 是给 fn 函数传递的第一个参数
// 200 是给 fn 函数传递的第二个参数
// 注意: 此时不会直接调用函数, 而是会有一个返回值出现
// res 就是一个新的函数, 和 fn 函数一模一样的代码, 只是里面的 this 指向 obj
var res = fn.bind(obj, 100, 200)
// res() 就是再调用一个和 fn 一模一样的函数, 只不过 this 改变了
res()
// 本次 bind 回把 fn 函数复制一份, 把里面的 this 改变成 time
var res2 = fn.bind(time, 1000, 2000)
res2()
本文地址:https://blog.csdn.net/DingDing_Zhang/article/details/107391956
如对本文有疑问, 点击进行留言回复!!
2020-07-21 html5如何监听veido的全屏 + css的字体间距 + JS的window.open() + 软技能svn与git
html+css+js适合前端小白的实战全解(超详细)——2048小游戏(二)
在使用@angular/cli创建的angular项目上添加postcss等一系列移动端自适应插件
网友评论