【JavaScript】this指向(call,aplly,bind)

发布时间:2024年01月19日

重学JavaScript04----- this指向


前言

callapplybind都是改变this指向的方法,也叫显示绑定

那么this到底是怎么样的绑定规则呢?

  • 绑定一:默认绑定
  • 绑定二:隐式绑定
  • 绑定三:显示绑定
  • 绑定四:new绑定

规则一:默认绑定

独立函数调用:函数没有被绑定到某个对象上进行调用

function foo() {
	console.log(this)
}

foo()

规则二:隐式绑定

通过某个对象进行调用

function foo() {
  console.log(this)
}

var obj = {
  name: "why",
  foo: foo
}

obj.foo() // obj对象

隐式绑定有一个前提条件:

  • 必须在调用的对象内部有一个对函数的引用(比如一个属性);
  • 如果没有这样的引用,在进行调用时,会报找不到该函数的错误;
  • 正是通过这个引用,间接的将this绑定到了这个对象上;

规则三:显示绑定

JavaScript所有的函数都可以使用callapply方法(这个和Prototype有关)

bind、call、apply的区别

它们的异同点:

  • 他们第一个参数是相同的(要指向的this对象),后面的参数,apply为数组,callbind为参数列表;
  • 这三个函数的第一个参数都要求是一个对象,这个对象的作用是什么呢?就是给this准备的。
  • 在调用这个函数时,会将this绑定到这个传入的对象上。
  • callapply都是对函数进行直接调用,而bind方法不会立即调用函数,而是返回一个修改this后的函数

因为我们明确的绑定了this指向的对象,所以称之为 显示绑定

通过call或者apply绑定this对象

显示绑定后,this就会明确的指向绑定的对象

function foo() {
  console.log("函数被调用了", this)
}

// 1.foo直接调用和call/apply调用的不同在于this绑定的不同
// foo直接调用指向的是全局对象(window)
foo() //函数被调用了 Window {window: Window, self: Window, document: document, name: "", location: Location, …}

var obj = {
  name: "obj"
}

// call/apply是可以指定this的绑定对象
foo.call(obj)//函数被调用了 {name: "obj"}
foo.apply(obj)//函数被调用了 {name: "obj"}
foo.apply("aaaa")//函数被调用了 String {"aaaa"}

通过bind绑定this对象

如果我们希望一个函数总是显示的绑定到一个对象上,可以使用bind进行绑定

function foo() {
  console.log(this)
}

// 默认绑定和显示绑定bind冲突: 优先级(显示绑定)

var newFoo = foo.bind("aaa")

newFoo() //String {"aaa"}
newFoo()
newFoo()
newFoo()
newFoo()
newFoo()

var bar = foo
console.log(bar === foo)//true
console.log(newFoo === foo)//false

手写实现apply、call、bind

1、call函数的实现
// 给所有的函数的原型添加一个mycall的方法
Function.prototype.mycall = function(thisArg, ...args) {
  // 1.获取需要被执行的函数
  var fn = this

  // 2.对thisArg转成对象类型(防止它传入的是非对象类型)
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window

  // 3.调用需要被执行的函数
  thisArg.fn = fn
  var result = thisArg.fn(...args)
  delete thisArg.fn

  // 4.将最终的结果返回出去
  return result
}
2、apply函数的实现

Function.prototype.myapply = function(thisArg, argArray) {
  // 1.获取到要执行的函数
  var fn = this

  // 2.处理绑定的thisArg
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window

  // 3.执行函数
  thisArg.fn = fn

  var result
  argArray = argArray || []

  result = thisArg.fn(...argArray)
  delete thisArg.fn

  // 4.返回结果
  return result
}
3、bind函数的实现

因为bind不是立即调用的,所以return一个proxyFn让使用者自己调用即可
proxyFn调用时也会收集用户输入的参数,并把收集的传参与调用mybind函数绑定时的参数合并

Function.prototype.mybind = function(thisArg, ...argArray) {
  // 1.获取到真实需要调用的函数
  var fn = this

  // 2.绑定this
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window

  function proxyFn(...args) {
    // 3.将函数放到thisArg中进行调用
    thisArg.fn = fn
    // 特殊: 对两个传入的参数进行合并
    var finalArgs = [...argArray, ...args]
    var result = thisArg.fn(...finalArgs)
    delete thisArg.fn

    // 4.返回结果
    return result
  }

  return proxyFn
}

规则四:new绑定

JavaScript中的函数可以当做一个类的构造函数来使用,也就是使用new关键字。

使用new关键字来调用函数是,会执行如下的操作:

  • 1.创建一个全新的对象;
  • 2.这个新对象会被执行prototype连接;
  • 3.这个新对象会绑定到函数调用的this上(this的绑定在这个步骤完成);
  • 4.如果函数没有返回其他对象,表达式会返回这个新对象;
// 我们通过一个new关键字调用一个函数时(构造器), 这个时候this是在调用这个构造器时创建出来的对象
// this = 创建出来的对象
// 这个绑定过程就是new 绑定

function Person(name, age) {
  this.name = name
  this.age = age
}

var p1 = new Person("死侍", 29)
console.log(p1.name, p1.age)

var p2 = new Person("金刚狼", 30)
console.log(p2.name, p2.age)

特殊情况

1、忽略显示绑定

如果在显示绑定中,我们传入一个null或者undefined,那么这个显示绑定会被忽略,使用默认规则

function foo() {
  console.log(this)
}

foo.apply("abc")
foo.apply({})

// apply/call/bind: 当传入null/undefined时, 自动将this绑定成全局对象
foo.apply(null)
foo.apply(undefined)

var bar = foo.bind(null)
bar()

2、间接函数引用

另外一种情况,创建一个函数的 间接引用,这种情况使用默认绑定规则。

var obj1 = {
  name: "obj1",
  foo: function() {
    console.log(this)
  }
}

var obj2 = {
  name: "obj2"
};

(obj2.bar = obj1.foo)() //Window {window: Window, self: Window, document: document, name: "", location: Location, …}

3、ES6箭头函数

箭头函数不使用this的四种标准规则(也就是不绑定this),而是根据外层作用域来决定this。

var name = "死侍"

var foo = () => {
  console.log(this)
}

foo() //Window {window: Window, self: Window, document: document, name: "死侍", location: Location, …}

总结:规则优先级

如果一个函数调用位置应用了多条规则,优先级谁更高呢?

1.默认规则的优先级最低

  • 毫无疑问,默认规则的优先级是最低的,因为存在其他规则时,就会通过其他规则的方式来绑定this

2.显示绑定优先级高于隐式绑定

var obj = {
  name: "obj",
  foo: function() {
    console.log(this)
  }
}

obj.foo() //{name: "obj", foo: ?}

// 1.call/apply的显示绑定高于隐式绑定
obj.foo.apply('abc') // String {"abc"}
obj.foo.call('abc') // String {"abc"}

// 2.bind的优先级高于隐式绑定
var bar = obj.foo.bind("abc") 
bar() // String {"abc"}

3.new绑定优先级高于隐式绑定

var obj = {
  name: "obj",
  foo: function() {
    console.log(this)
  }
}

// new的优先级高于隐式绑定
var f = new obj.foo()

4.new绑定优先级高于bind

  • new绑定和call、apply是不允许同时使用的,所以不存在谁的优先级更高
  • new绑定可以和bind一起使用,new绑定优先级更高
文章来源:https://blog.csdn.net/m0_68324632/article/details/127634207
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。