JavaScript函数this指向

最新推荐文章于 2024-07-20 23:54:17 发布
最新推荐文章于 2024-07-20 23:54:17 发布
阅读量193 收藏
点赞数
分类专栏： # JavaScript高级 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Welitsi/article/details/133001923
版权

一、this的指向规则

1.this到底指向什么呢？

我们先来看一个让人困惑的问题：

  • 定义一个函数，我们采用三种不同的方式对它进行调用，它产生了三种不同的结果
// 定义函数
function foo(name) {
    console.log("foo函数:", this)
}

// 1.方式一: 直接调用
// foo()

// 2.方式二: 通过对象调起
var obj = { name: "why" }
obj.aaa = foo

obj.aaa()
// 3.方式三：通过call/apply调用
foo.call("abc");

这个的案例可以给我们什么样的启示呢？

  1. 函数在调用时，JavaScript会默认给this绑定一个值；
  2. this的绑定和定义的位置（编写的位置）没有关系；
  3. this的绑定和调用方式以及调用的位置有关系；
  4. this是在运行时被绑定的；

那么this到底是怎么样的绑定规则呢？一起来学习一下吧

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

2.规则一：默认绑定（讲过）

什么情况下使用默认绑定呢？独立函数调用。

  • 独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用；

我们通过几个案例来看一下，常见的默认绑定

// "use strict"

// 定义函数
// 1.普通的函数被独立的调用
function foo() {
    console.log("foo:", this)
}
foo()


// 2.函数定义在对象中, 但是独立调用
var obj = {
    name: "why",
    bar: function() {
        console.log("bar:", this)
    }
}

var baz = obj.bar
baz()


// 3.高阶函数
function test(fn) {
    fn()
}

test(obj.bar)

// 4.严格模式下, 独立调用的函数中的this指向的是undefined

3.规则二：隐式绑定（讲过）

另外一种比较常见的调用方式是通过某个对象进行调用的：

  • 也就是它的调用位置中，是通过某个对象发起的函数调用。

我们通过几个案例来看一下，常见的隐式绑定

// 你不知道的JavaScript(上中下)
// 隐式绑定
function foo() {
    console.log("foo函数:", this)
}

var obj = {
    bar: foo
}

obj.bar()

4.规则三：显式绑定

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

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

如果我们不希望在 对象内部 包含这个函数的引用，同时又希望在这个对象上进行强制调用，该怎么做呢？

JavaScript所有的函数都可以使用call和apply方法。

  • 第一个参数是相同的，要求传入一个对象；
    • 这个对象的作用是什么呢？就是给this准备的。
    • 在调用这个函数时，会将this绑定到这个传入的对象上。
  • 后面的参数，apply为数组，call为参数列表；

因为上面的过程，我们明确的绑定了this指向的对象，所以称之为 显式绑定。

// 显式绑定
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")

5.规则四：new绑定

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

使用new关键字来调用函数时，会执行如下的操作：

  1. 创建一个全新的对象；
  2. 这个新对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性；（后面详细讲）；
  3. 这个新对象会绑定到函数调用的this上（this的绑定在这个步骤完成）；
  4. 如果函数没有返回其他对象，表达式会返回这个新对象；
/*
      1.创建新的空对象
      2.将this指向这个空对象
      3.执行函数体中的代码
      4.没有显示返回非空对象时, 默认返回这个对象
    */
function foo() {
    this.name = "why"
    console.log("foo函数:", this)
}

new foo()

二、显式绑定函数

1.call、apply、bind

通过call或者apply绑定this对象

  • 显示绑定后，this就会明确的指向绑定的对象
// 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)

如果我们希望一个函数总是显式的绑定到一个对象上，可以怎么做呢？

  • 使用bind方法，bind() 方法创建一个新的绑定函数（bound function，BF）；
  • 绑定函数是一个 exotic function object（怪异函数对象，ECMAScript 2015 中的术语）
  • 在 bind() 被调用时，这个新函数的 this 被指定为 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")

2.内置函数的绑定思考

有些时候，我们会调用一些JavaScript的内置函数，或者一些第三方库中的内置函数。

  • 这些内置函数会要求我们传入另外一个函数；
  • 我们自己并不会显示的调用这些函数，而且JavaScript内部或者第三方库内部会帮助我们执行；
  • 这些函数中的this又是如何绑定的呢？

setTimeout、数组的forEach、div的点击

setTimeout(function () {
    console.log("timeout", this)//window
}, 1000);

var boxEl = document.querySelector(".box");
boxEl.addEventListener("click", function () {
    console.log("click", this);//boxEl
    console.log(this === boxEl);
})

var names = ["abc", "edf", "fdc"];
var obj = {name: "aaa"};
names.forEach(function (value) {
    console.log(value, this);// window
});

names.forEach(function (value) {
    console.log(value, this);// obj
}, obj)

三、规则绑定优先级

学习了四条规则，接下来开发中我们只需要去查找函数的调用应用了哪条规则即可，但是如果一个函数调用位置应用了多条规则，优先级谁更高呢？

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

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

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

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

  3. new绑定优先级高于bind

  • new绑定和call、apply是不允许同时使用的，所以不存在谁的优先级更高
  • new绑定可以和bind一起使用，new绑定优先级更高
// function foo() {
//   console.log("foo:", this)
// }

// 比较优先级:

// 1.显式绑定绑定的优先级高于隐式绑定
// 1.1.测试一:apply高于默认绑定
// var obj = { foo: foo }
// obj.foo.apply("abc")
// obj.foo.call("abc")

// 1.2.测试二:bind高于默认绑定
// var bar = foo.bind("aaa")
// var obj = {
//   name: "why",
//   baz: bar
// }
// obj.baz()


// 2.new绑定优先级高于隐式绑定
// var obj = {
//   name: "why",
//   foo: function() {
//     console.log("foo:", this)
//     console.log("foo:", this === obj)
//   }
// }
// new obj.foo()


// 3.new/显式
// 3.1. new不可以和apply/call一起使用

// 3.2. new优先级高于bind
// function foo() {
//   console.log("foo:", this)
// }
// var bindFn = foo.bind("aaa")
// new bindFn()


// 4.bind/apply优先级
// bind优先级高于apply/call
function foo() {
    console.log("foo:", this)
}
var bindFn = foo.bind("aaa")
bindFn.call("bbb")

四、箭头函数

1.箭头函数 arrow function

箭头函数是ES6之后增加的一种编写函数的方法，并且它比函数表达式要更加简洁：

  • 箭头函数不会绑定this、arguments属性；
  • 箭头函数不能作为构造函数来使用（不能和new一起来使用，会抛出错误）；

箭头函数如何编写呢？

  • (): 函数的参数
  • {}: 函数的执行体

2.箭头函数的编写优化

优化一: 如果只有一个参数时()可以省略

var foo = x => {
    return x + 1;
}

优化二: 如果函数执行体中只有一行代码, 那么可以省略大括号

  • 并且这行代码的返回值会作为整个函数的返回值
var foo = x => x + 1;

优化三: 如果函数执行体只有返回一个对象, 那么需要给这个对象加上()

var names = ["abc", "cba", "nba"]
var nums = [20, 30, 11, 15, 111]

// 1.优化一: 如果箭头函数只有一个参数, 那么()可以省略
// names.forEach(item => {
//   console.log(item)
// })
// var newNums = nums.filter(item => {
//   return item % 2 === 0
// })

// 2.优化二: 如果函数体中只有一行执行代码, 那么{}可以省略
// names.forEach(item => console.log(item))

// 一行代码中不能带return关键字, 如果省略, 需要带return一起省略(下一条规则)
// var newNums = nums.filter(item => {
//   return item % 2 === 0
// })

// 3.优化三: 只有一行代码时, 这行代码的表达式结果会作为函数的返回值默认返回的
// var newNums = nums.filter(item => item % 2 === 0)
// var newNums = nums.filter(item => item % 2 === 0)


// 4.优化四: 如果默认返回值是一个对象, 那么这个对象必须加()
// 注意: 在react中我会经常使用 redux

// var arrFn = () => ["abc", "cba"]
// var arrFn = () => {} // 注意: 这里是{}执行体
// var arrFn = () => ({ name: "why" })
// console.log(arrFn())

// 箭头函数实现nums的所有偶数平方的和
var nums = [20, 30, 11, 15, 111]
var result = nums.filter(item => item % 2 === 0)
.map(item => item * item)
.reduce((prevValue, item) => prevValue + item)
console.log(result)

五、this规则之外的特殊情况

1.忽略显示绑定

我们讲到的规则已经足以应付平时的开发，但是总有一些语法，超出了我们的规则之外。（神话故事和动漫中总是有类似这样的 人物）

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

// 1.情况一: 显式绑定null/undefined, 那么使用的规则是默认绑定
// function foo() {
//   console.log("foo:", this)
// }

// foo.apply("abc")
// foo.apply(null)
// foo.apply(undefined)

2.间接函数引用

情况二：创建一个函数的间接引用，这种情况使用默认绑定规则。

  • 赋值(obj2.foo = obj1.foo)的结果是foo函数；
  • foo函数被直接调用，那么是默认绑定；
// 2.情况二: 间接函数引用
var obj1 = {
    name: "obj1",
    foo: function() {
        console.log("foo:", this)
    }
}
var obj2 = {
    name: "obj2"
};

// {}[]()

// obj2.foo = obj1.foo
// obj2.foo()
(obj2.foo = obj1.foo)()

3.ES6箭头函数

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

我们来看一个模拟网络请求的案例：

var obj = {
    data: [],
    getData: function() {
        var _this = this;
        setTimeout(function () {
            // 模拟获取到数据
            var res = ["abc", "ceb", "edf"];
            _this.data.push(...res);
        }, 1000);
    }
}
  • 这里我使用setTimeout来模拟网络请求，请求到数据后如何可以存放到data中呢？
  • 我们需要拿到obj对象，设置data；
  • 但是直接拿到的this是window，我们需要在外层定义：var _this = this _
  • 在setTimeout的回调函数中使用_this就代表了obj对象

之前的代码在ES6之前是我们最常用的方式，从ES6开始，我们会使用箭头函数：

var obj = {
    data: [],
    getData: function() {
        setTimeout(function () {
            // 模拟获取到数据
            var res = ["abc", "ceb", "edf"];
            this.data.push(...res);
        }, 1000);
    }
}
  • 为什么在setTimeout的回调函数中可以直接使用this呢？
  • 因为箭头函数并不绑定this对象，那么this引用就会从上层作用于中找到对应的this

思考：如果getData也是一个箭头函数，那么setTimeout中的回调函数中的this指向谁呢？

window

六、面试题

1.面试题一

var name = "window";

var person = {
  name: "person",
  sayName: function () {
    console.log(this.name);
  }
};

function sayName() {
  var sss = person.sayName;

  sss(); // 绑定: 默认绑定, window -> window

  person.sayName(); // 绑定: 隐式绑定, person -> person

  (person.sayName)(); // 绑定: 隐式绑定, person -> person

  (b = person.sayName)(); // 术语: 间接函数引用, window -> window
}

sayName();

2.面试题二

var name = 'window'


// {} -> 对象
// {} -> 代码块
var person1 = {
  name: 'person1',
  foo1: function () {
    console.log(this.name)
  },
  foo2: () => console.log(this.name),
  foo3: function () {
    return function () {
      console.log(this.name)
    }
  },
  foo4: function () {
    // console.log(this) // 第一个表达式this -> person1
    // console.log(this) // 第二个表达式this -> person2
    // console.log(this) // 第三个表达式this -> person1
    
    return () => {
      console.log(this.name)
    }
  }
}

var person2 = { name: 'person2' }


// 开始题目:
person1.foo1(); // 隐式绑定: person1
person1.foo1.call(person2); // 显式绑定: person2

person1.foo2(); // 上层作用域: window
person1.foo2.call(person2); // 上层作用域: window

person1.foo3()(); // 默认绑定: window
person1.foo3.call(person2)(); // 默认绑定: window
person1.foo3().call(person2); // 显式绑定: person2

person1.foo4()(); // person1
person1.foo4.call(person2)(); // person2
person1.foo4().call(person2); // person1

3.面试题三

var name = 'window'

/*
  1.创建一个空的对象
  2.将这个空的对象赋值给this
  3.执行函数体中代码
  4.将这个新的对象默认返回
*/
function Person(name) {
  this.name = name
  this.foo1 = function () {
    console.log(this.name)
  },
  this.foo2 = () => console.log(this.name),
  this.foo3 = function () {
    return function () {
      console.log(this.name)
    }
  },
  this.foo4 = function () {
    return () => {
      console.log(this.name)
    }
  }
}

// person1/person都是对象(实例instance)
var person1 = new Person('person1')
var person2 = new Person('person2')


// 面试题目:
person1.foo1() // 隐式绑定: person1
person1.foo1.call(person2) // 显式绑定: person2

person1.foo2() // 上层作用域查找: person1
person1.foo2.call(person2) // 上层作用域查找: person1

person1.foo3()() // 默认绑定: window
person1.foo3.call(person2)() // 默认绑定: window
person1.foo3().call(person2) // 显式绑定: person2

person1.foo4()() // 上层作用域查找: person1(隐式绑定)
person1.foo4.call(person2)() //  上层作用域查找: person2(显式绑定)
person1.foo4().call(person2) // 上层作用域查找: person1(隐式绑定)

4.面试题四

var name = 'window'

/*
  1.创建一个空的对象
  2.将这个空的对象赋值给this
  3.执行函数体中代码
  4.将这个新的对象默认返回
*/
function Person(name) {
  this.name = name
  this.obj = {
    name: 'obj',
    foo1: function () {
      return function () {
        console.log(this.name)
      }
    },
    foo2: function () {
      return () => {
        console.log(this.name)
      }
    }
  }
}

var person1 = new Person('person1')
var person2 = new Person('person2')

person1.obj.foo1()() // 默认绑定: window
person1.obj.foo1.call(person2)() // 默认绑定: window
person1.obj.foo1().call(person2) // 显式绑定: person2

person1.obj.foo2()() // 上层作用域查找: obj(隐式绑定)
person1.obj.foo2.call(person2)() // 上层作用域查找: person2(显式绑定)
person1.obj.foo2().call(person2) // 上层作用域查找: obj(隐式绑定)
DustinWangq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript中this指向问题
Celester_best的博客
03-14 1760
普通函数时，this指向window <script> function test() { console.log('=== test this: ', this) } test() const test1 = function () { console.log('===test1 this: ', this) } test1() &
Javascript 中 this指向
09-07
这种情况相对简单、直接，函数在浏览器全局环境下被简单调用，在非严格模式下this指向window，在通过use strict指明严格模式的情况下指向undefined。 例题 2： ``` const foo = { bar : 10, fn : function(){ ...
JavaScript中this指向问题
m0_72752380的博客
10-28 940
箭头函数本身没有this，箭头函数中的this与上级作用域中的this相同。函数还可以作为某个对象的方法调用，这时this就指向这个调用函数的对象。bind方法会将函数的this，永久捆绑在指定的对象上，不能改变。在let中声明的箭头函数，存储在脚本作用域中，
js箭头函数/函数this指向
Canace_Xyxjjcaw的博客
10-13 5116
一、函数的this指向 this是每一个函数都 一定有的关键词 this本质上是一个对象数据结构 用于指向数据 通过this关键词，可以调用操作这个 数据 1、this指向window 声明式函数 匿名函数 定时器 延时器 forEach循环 2、this指向事件源 事件绑定中，事件处理函数 this指向默认是事件源，也就是绑定事件的标签对象 3、this指向数组/对象 数组/对象 中存...
JavaScript中this的指向
friend_ship的博客
12-30 744
this的指向大致可以分为以下4种： 作为对象的方法调用。 作为普通函数调用。 构造器调用。 Function.prototype.call 或 Function.prototype.apply调用。
关于JavaScript中this指向的详解
weixin_45939221的博客
11-23 1810
关于JavaScript中的this指向以及改变this的三种方法
彻底理解JavaScript中this指向
猫老板的豆
11-09 1293
如果要判断一个运行中函数的 this 绑定， 就需要找到这个函数的直接调用位置。找到之后new 调用：绑定到新创建的对象，注意：显示return函数或对象，返回值不是新创建的对象，而是显式返回的函数或对象。call、apply、bind调用：严格模式下，绑定到指定的第一个参数。非严格模式下，null和undefined，指向全局对象（浏览器中是window），其余值指向被new Object()包装的对象。对象上的函数调用：绑定到那个对象。普通函数调用。
构造函数this指向
GrowingRick的博客
03-16 3016
构造函数this指向： 1 构造函数this指的是对象实例 2 原型对象函数里面也this也是指向实例对象 // 构造函数 function Student(name,age) { this.name = name; this.age = age; } Student.prototy...
箭头函数及其this指向
weixin_42178670的博客
04-10 6151
箭头函数 1、只有一个参数的时候，参数可以不加小括号，没有参数或2个及以上参数的，必须加上小括号 2、返回语句只有一条的时候可以不写{}和return，会自动加上return的，返回多条语句时必须加上{}和return 3、箭头函数在返回对象的时候必须在对象外面加上小括号 箭头函数的this指向和普通函数的区别 1、普通函数this指向： 指向它的调用者，如果没有调用者则默认指向window 2、箭头函数指向： 指向箭头函数定义的时候所处的对象，而不是其所使用的时候所处的对象，默认指向父级的this 综上：
JavaScript中嵌套函数的this指向及修改
qq_41625748的博客
10-04 865
首先，我们先看一段代码如果是下，运行结果是:；如果是下，运行结果是:；
JavaScript改变this指向的三种方法
m0_65569793的博客
05-03 7328
1.call() 方法 call()可以改变函数内的this 指向，可以调用函数 <script> function Person() { this.name = 'kobe'; this.sex = '男'; this.age = '41' } function Star(name,sex,age) { Person.call(th..
【JavaScript源代码】JavaScript函数this指向问题详解.docx
12-29
JavaScript中的`this`关键字是一个非常重要的概念，它在不同的上下文中具有不同的指向。理解`this`的指向对于编写高效和可维护的JavaScript代码至关重要。在本文中，我们将深入探讨`this`在各种函数调用场景下的行为...
javascript中this指向详解
10-22
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象，接下来我会深入的探讨这个问题。
改变javascript函数内部this指针指向的三种方法
10-29
javascript 的this 值，真的是非常的莫名奇妙。我一直被搞的很头晕，也许正是这个this，让大多数人感觉js 非常的莫名其妙。
JavaScript This指向问题详解
10-15
`this`的指向在JavaScript中并不像其他语言那样固定，而是根据函数被调用的方式而变化。以下是对`this`指向问题的详细解析： 1. **基本概念** - `this`的值在函数调用时确定，由函数调用方式决定。 - 在非严格...
Next.js静态导出与动态路由优化
最新发布
天涯学馆
07-20 722
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1065
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 535
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps
yuan5025的博客
07-17 1038
目前这个问题只在芋道源码yudao-ui-admin-vben碰到了，其他vue项目没用遇到过。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值