一、代码
function person(p1, p2, p3) { console.log('this: ', this) console.log('name: ', this.name) console.log('传递的参数p1: ', p1) console.log('传递的参数p2: ', p2) console.log('传递的参数p3: ', p3) } let obj1 = { name: 'zhangsan', age: 17 }
let obj2 = { name: 'sunwu', age: 18 } let obj3 = { name: 'aguang', age: 19 }
二、bind 应用场景(一切不需要立即执行的情况,如,点击事件触发某个函数执行,需要改变函数内this指向的),只是绑定不立即执行
1 person.bind(obj1, 33) // bind(this要绑定的对象, 其它参数) 2 3 // bind 如果是绑定后立即执行则,bind立即执行需() 4 person.bind(obj1, 44)() 5 /* 6 运行结果: 7 this: {name: "zhangsan", age: 17} 8 name: zhangsan 9 传递的参数p1: 44 10 传递的参数p2: undefined 11 传递的参数p3: undefined 12 */ 13 14 // bind 使用场景举例:一个按钮单击事件,点击后触发 15 const btn = document.getElementById('btn1'); 16 btn.addEventListener('click', person.bind(obj1, 55, 66, 77)) 17 /* 18 运行结果: 19 this: {name: "zhangsan", age: 17} 20 name: zhangsan 21 传递的参数p1: 55 22 传递的参数p2: 66 23 传递的参数p3: 77 24 */
三、call
1 // call 改变函数内部this指针到obj2对象,且传递参数88,99,多个参数可以并列用逗号排开 88,99 ... ,是立即执行 2 person.call(obj2, 88, 99) 3 /* 4 运行结果: 5 this: {name: "sunwu", age: 18} 6 name: sunwu 7 传递的参数p1: 88 8 传递的参数p2: 99 9 传递的参数p3: undefined 10 */
四、apply
1 // bind 改变函数内部this指针到obj3对象,且传递参数[100,200,300],与call区别仅在于apply传递参数是一个数组,多个参数可存在一个数组传递,是立即执行 2 person.apply(obj3, [100, 200, 300]) 3 /* 4 运行结果: 5 this: {name: "aguang", age: 19} 6 name: aguang 7 传递的参数p1: 100 8 传递的参数p2: 200 9 传递的参数p3: 300 10 */