// 定义函数
function foo(name) {
console.log("foo函数:", this)
}
// 1.方式一: 直接调用
// foo()
// 2.方式二: 通过对象调起
var obj = { name: "why" }
obj.aaa = foo
obj.aaa()
<aside> 💡 启示:
<aside> 💡 什么情况下使用默认绑定呢?独立函数调用。
独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用
</aside>
<aside>
⚠️ 严格模式下( use strict
),独立调用的函数中的 this
指向的是 undefined
</aside>
<aside> 💡 另外一种比较常见的调用方式是通过某个对象进行调用的:
也就是它的调用位置中,是通过某个对象发起的函数调用。
</aside>
<aside> 💡 隐式绑定有一个前提条件:
// 显式绑定
var obj = {
name: "why"
}
function foo() {
console.log("foo函数:", this)
}
// 执行函数, 并且函数中的this指向obj对象
// obj.foo = foo
// obj.foo()
// 执行函数, 并且强制this就是obj对象
foo.call(obj)
foo.call(123)
foo.call("abc")
<aside>
💡 使用 call
和 apply
函数进行显式绑定(两个函数的区别在于实参的格式不一样):
// call/apply
function foo(name, age, height) {
console.log("foo函数被调用:", this)
console.log("打印参数:", name, age, height)
}
// ()调用
// foo("why", 18, 1.88)
// apply
// 第一个参数: 绑定this
// 第二个参数: 传入额外的实参, 以数组的形式
// foo.apply("apply", ["kobe", 30, 1.98])
// call
// 第一个参数: 绑定this
// 参数列表: 后续的参数以多参数的形式传递, 会作为实参
foo.call("call", "james", 25, 2.05)
</aside>
<aside> 💡 JavaScript 中的函数可以当做一个类的构造函数来使用,也就是使用 new 关键字
</aside>
bind()
function foo(name, age, height, address) {
console.log("foo:", this)
console.log("参数:", name, age, height, address)
}
var obj = { name: "why" }
// 需求: 调用foo时, 总是绑定到obj对象身上(不希望obj对象身上有函数)
// 1.bind函数的基本使用
// var bar = foo.bind(obj)
// bar() // this -> obj
// 2.bind函数的其他参数(了解)
var bar = foo.bind(obj, "kobe", 18, 1.88)
bar("james")
如果我们希望一个函数总是显式地绑定到一个对象上,可以使用 bind()
方法。使用 bind()
方法可以创建一个新的绑定函数,在 bind()
被调用时,这个新的 this
被指定为 bind()
的第一个参数,而其余参数作为新函数的参数,供调用时使用