Js--this的绑定

this的绑定

文章目录

• 前言
• 一、为什么需要this？
• 二、this的绑定规则

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、为什么需要this？

示例：。类中的方法（特别是实例方法）中，this代表的是当前调用对象如果不使用this使用类名称调用 后续维护如果更改名称(obj => obj2)类中的各个名称也要修改维护麻烦 使用this则更加方便便于维护

 

二、this的绑定规则

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

代码如下（示例）：

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

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

obj.foo()//输出 obj

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

代码如下（示例）：

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

var obj = {
    name: "obj",
    foo: "foo.bind("aaa")
}

obj.foo()

控制台输出: aaa 而不是 obj

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

obj.foo.call('abc)//abc
obj.foo.apply('abc)//abc

结论：call/apply的显示绑定高于隐式绑定

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

代码如下（示例）：

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

var f = new obj.foo()//输出 foo()

4.new绑定优先级高于bind

代码如下（示例）：

function foo() {
   console.log(this)
}
var bar = foo.bind('aaa')
var obj = new bar()

//输出结果为 foo

三、this的绑定规则之外

1.忽略显示绑定

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

var obj = {
  name: 'why'
}

foo.call(obj)//obj对象
foo.call(null)//window
foo.call(undefined)//window

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

结论：如果在显示绑定中传入一个 nul 或 undefined 那么这个显示绑定会被忽略 使用默认规则

2.间接函数引用

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

var obj1 = {
  name: 'obj1',
  foo: 'foo'
};

var obj2 = {
  name: 'obj2'
}

obj1.foo();// obj1对象
(obj2.foo = obj1.foo())(); // 间接函数引用 此次相当于 独立函数调用 控制台输出 window

---