JS this指向以及call、apply、bind

最新推荐文章于 2024-03-31 15:50:35 发布
最新推荐文章于 2024-03-31 15:50:35 发布
阅读量199 收藏
点赞数 1
分类专栏： JavaScript 文章标签： js this指向 call apply bind
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Superman_peng/article/details/119282205
版权

this

值为当前执行上下文（global、functio或eval）的一个属性，在非严格模式下，总是指向一个对象，在严格模式下可以是任意值。

描述

全局上下文

无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象。

// 在浏览器中, window 对象同时也是全局对象：
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"

函数上下文

在函数内部，this的值取决于函数被调用的方式。

function f1(){
  return this;
}
//在浏览器中：
f1() === window;   //在浏览器中，全局对象是window

//在Node中：
f1() === globalThis;

然而，在严格模式下，如果进入执行环境时没有设置 this 的值，this 会保持为 undefined，如下：

function f2(){
  "use strict"; // 这里是严格模式
  return this;
}

f2() === undefined; // true

注：

  • 箭头函数比较特殊没有自己的 this，也不可以改变 this 的绑定，其 this 指向函数所在的作用域 。

类上下文

this 在 类 中的表现与在函数中类似，因为类本质上也是函数，但也有一些区别和注意事项。

在类的构造函数中，this 是一个常规对象。类中所有非静态的方法都会被添加到 this 的原型中：

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

派生类

不像基类的构造函数，派生类的构造函数没有初始的 this 绑定。在构造函数中调用 super() 会生成一个 this 绑定，并相当于执行如下代码，Base为基类

this = new Base();

派生类不能在调用 super() 之前返回，除非其构造函数返回的是一个对象，或者根本没有构造函数。

class Base {}
class Good extends Base {}
class AlsoGood extends Base {
  constructor() {
    return {a: 5};
  }
}
class Bad extends Base {
  constructor() {}
}

new Good();
new AlsoGood();
new Bad(); // ReferenceError

例题

40道this面试题

1.1

var a = 1
function foo () {
  var a = 2
  console.log(this)
  console.log(this.a)
}

foo() 
// Window 
// 1

1.2

var a = 1
function foo () {
  var a = 2
  function inner () { 
    console.log(this.a)
  }
  inner()
}

foo() 
// 1

2、隐式绑定的丢失问题

隐式丢失其实就是被隐式绑定的函数在特定的情况下会丢失绑定对象。

有两种情况容易发生隐式丢失问题：

  • 使用另一个变量来给函数取别名
  • 将函数作为参数传递时会被隐式赋值，回调函数丢失this绑定
2.1 使用另一个变量来给函数取别名
function foo () {
  console.log(this.a)
};
var obj = { a: 1, foo };
var a = 2;
var foo2 = obj.foo;

obj.foo();
foo2();
// 1 
// 2

var obj = { a: 1, foo };就相当于是var obj = { foo: foo },函数foo()虽然是定义在window下，但是我在obj对象中引用了它，并将它重新赋值到obj.foo上。且调用它的是obj对象，因此打印出来的this.a应该是obj中的a。

这是因为虽然foo2指向的是obj.foo函数，不过调用它的却是window对象，所以它里面this的指向是为window。

2.2 将函数作为参数传递
function foo () {
  console.log(this.a)
}
function doFoo (fn) {
  console.log(this)
  fn()
}
var obj = { a: 1, foo }
var a = 2
doFoo(obj.foo)
// Window 
// 2

function foo () {
  console.log(this.a)
}
function doFoo (fn) {
  console.log(this)
  fn()
}
var obj = { a: 1, foo }
var a = 2
var obj2 = { a: 3, doFoo }

obj2.doFoo(obj.foo)
// { a:3, doFoo: f }
// 2

var obj1 = {
  a: 1
}
var obj2 = {
  a: 2,
  foo1: function () {
    console.log(this.a)
  },
  foo2: function () {
    setTimeout(function () {
      console.log(this)
      console.log(this.a)
    }, 0)
  }
}
var a = 3

obj2.foo1()
obj2.foo2()
// 2
// Window
// 3

对于setTimeout中的函数，这里存在隐式绑定的隐式丢失，也就是当我们将函数作为参数传递时会被隐式赋值，回调函数丢失this绑定，因此这时候setTimeout中的函数内的this是指向window的。

3、显示绑定call、apply、bind

如果call、apply、bind接收到的第一个参数是空或者null、undefined的话，则会忽略这个参数。

3.1
function foo () {
  console.log(this.a)
}
var obj = { a: 1 }
var a = 2

foo()
foo.call(obj)
foo.apply(obj)
foo.bind(obj)
// 2
// 1
// 1

foo.call()
foo.call(null)
foo.call(undefined)
// 2
// 2
// 2

var obj1 = {
  a: 1
}
var obj2 = {
  a: 2,
  foo1: function () {
    console.log(this.a)
  },
  foo2: function () {
    setTimeout(function () {
      console.log(this)
      console.log(this.a)
    }.call(obj1), 0)
  }
}
var a = 3
obj2.foo1()
obj2.foo2()
// 2
// { a: 1 }
// 1
3.2
function foo () {
  console.log(this.a)
}
var obj = { a: 1 }
var a = 2

foo()
foo.call(obj)
foo().call(obj)
// 2
// 1
// 2
// Uncaught TypeError: Cannot read property 'call' of undefined
  • foo()会正常打印出window下的a，也就是2
  • foo.call(obj)由于显式绑定了this，所以会打印出obj下的a，也就是1
  • foo().call(obj)开始会执行foo()函数，打印出2，但是会对foo()函数的返回值执行.call(obj)操作，可是我们可以看到foo()函数的返回值是undefined，因此就会报错了。

所以我们可以看到foo.call()和foo().call()的区别了，一个是针对于函数，一个是针对于函数的返回值。

加上返回值看一下：

function foo () {
  console.log(this.a)
  return function () {
    console.log(this.a)
  }
}
var obj = { a: 1 }
var a = 2

foo()
foo.call(obj)
foo().call(obj)
// 2
// 1
// 2
// 1

4、箭头函数

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

var obj2 = {
	name: 'obj2',
	foo: () => {
		console.log(this.name)
	}
}

obj1.foo()
obj2.foo()
// 'obj1'
// 'window'
  • 不使用箭头函数的obj1.foo()是由obj1调用的，所以this.name为obj1。
  • 使用箭头函数的obj2.foo()的外层作用域是window，所以this.name为window。
var name = 'window'
var obj1 = {
  name: 'obj1',
  foo: function () {
    console.log(this.name)
    return function () {
      console.log(this.name)
    }
  }
}
var obj2 = {
  name: 'obj2',
  foo: function () {
    console.log(this.name)
    return () => {
      console.log(this.name)
    }
  }
}
var obj3 = {
  name: 'obj3',
  foo: () => {
    console.log(this.name)
    return function () {
      console.log(this.name)
    }
  }
}
var obj4 = {
  name: 'obj4',
  foo: () => {
    console.log(this.name)
    return () => {
      console.log(this.name)
    }
  }
}

obj1.foo()() // obj1 window
obj2.foo()() // obj2 obj2
obj3.foo()() // window window
obj4.foo()() // window window
  • obj1.foo()()两层都是普通函数，外层函数的调用者 obj1，外层函数的调用者为 window，分别打印出obj1和window。
  • obj2.foo()()外层为普通函数，内层为箭头函数，外层函数的调用者为 obj2，内层箭头函数的 this 由外层作用域决定，即为 obj2，分别打印出 obj2 、obj2
  • obj3.foo()()外层为箭头函数，内层为普通函数，箭头函数的this由外层作用域决定，因此为window，内层普通函数由调用者决定，调用它的是window，因此也为window。
  • obj4.foo()()两层都是箭头函数，第一个箭头函数的this由外层作用域决定，因此为window，第二个箭头函数的this也由外层作用域决定，它的外层作用域是第一个箭头函数，而第一个箭头函数的this是window，因此内层的this也是window。

call、apply、bind

call

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

注意：该方法的语法和作用与 apply() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。

语法

function.call(thisArg, arg1, arg2, ...)

参数

  • thisArg

    可选的。在 function 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则不指定或指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。

  • arg1, arg2, ...

    指定的参数列表。

返回值

使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值，则返回 undefined。

示例

  • 使用 call 方法调用父构造函数

    function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}

var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

  • 使用 call 方法调用匿名函数

    var animals = [
  { species: 'Lion', name: 'King' },
  { species: 'Whale', name: 'Fail' }
];

for (var i = 0; i < animals.length; i++) {
  (function(i) {
    this.print = function() {
      console.log('#' + i + ' ' + this.species
                  + ': ' + this.name);
    }
    this.print();
  }).call(animals[i], i);
}

  • 使用 call 方法调用函数并且不指定第一个参数

    如果没有传递第一个参数，非严格模式下，this的值将会被绑定为全局对象‘；严格模式下，this 的值将会是 undefined。

    var sData = 'Wisen';

function display() {
  console.log('sData value is %s ', this.sData);
}

display.call();  // sData value is Wisen

apply

apply() 方法调用一个具有给定this值的函数，以及以一个数组（或类数组）的形式提供的参数。

类数组：

  • 拥有length属性，其它属性（索引）为非负数
  • 不具有数组所具有的方法，可以通过Function.call或者Function.apply方法改变this指向，可以间接在类数组中使用数组的方法。
  • javascript中常见的类数组有 arguments对象和 DOM方法的返回结果。比如 document.getElementsByTagName()。

参数

  • thisArg

    必选的。在 func 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。

  • argsArray

    可选的。一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。

返回值

调用有指定**this**值和参数的函数的结果。

bind

**bind() **方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

function.bind(thisArg[, arg1[, arg2[, ...]]])

参数：

  • thisArg

    调用绑定函数时作为 this 参数传递给目标函数的值。

  • arg1, arg2, ...

    当目标函数被调用时，被预置入绑定函数的参数列表中的参数。

返回值：

返回一个原函数的拷贝，并拥有指定的this值和初始参数。

示例

  • 偏函数

    只需要将预设的初始参数作为bind()的参数写在this后面。当绑定函数被调用时，这些参数会被插入到目标函数的参数列表的开始位置。

    function list() {
  return Array.prototype.slice.call(arguments);
}

function addArguments(arg1, arg2) {
    return arg1 + arg2
}

var list1 = list(1, 2, 3); // [1, 2, 3]

var result1 = addArguments(1, 2); // 3

// 创建一个函数，它拥有预设参数列表。
var leadingThirtysevenList = list.bind(null, 37);

// 创建一个函数，它拥有预设的第一个参数
var addThirtySeven = addArguments.bind(null, 37);

var list2 = leadingThirtysevenList();
// [37]

var list3 = leadingThirtysevenList(1, 2, 3);
// [37, 1, 2, 3]

var result2 = addThirtySeven(5);
// 37 + 5 = 42

var result3 = addThirtySeven(5, 10);
// 37 + 5 = 42 ，第二个参数被忽略

区别

  1. call 和 apply 会调用函数，并且改变函数内部 this 指向。
  2. cal 和 apply 传递的参数不一样， call 传递参数以 aru1, aru2…形式， apply 必须以数组形式 [ arg ]。
  3. bind 不会调用函数，可以改变函数内部 this 指向。
Missy Peng
关注
专栏目录
JS基础篇-bind,call,apply
jinbiao8246的博客
04-03 304
bind的具体使用 bind方法主要是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this会指向传入bind()的第一个参数的值。 例如fn.bind(obj)其实和obj.fn()效果是一样的。 直接上代码： function func(a,b){ console.log(`这里的this是${this};参数一是${a},参数二是${b},这是个${this.ace}`...
开启Javascript中apply、call、bind的用法之旅模式
10-23
为了控制函数的this指向，JavaScript提供了apply、call以及bind方法。以下详细解释了apply、call以及bind的用法，并通过实例加深理解。 1. apply()和call()方法 apply()和call()方法都用于指定函数体内this的值。...
一文学会js里bind方法的模拟实现，掌握bind、apply和bind区别和用法
陈坚泓的博客
03-06 424
一文读懂js里bind方法的模拟实现bind返回函数的模拟实现传参的模拟实现构造函数效果的模拟实现构造函数效果的优化实现最终代码推荐阅读 你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特 《人生果实》经典语录 bind 一句话介绍 bind: bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的this，之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN ) 由此我们可以首先得出bind 函数的两个特点： 返回一个函数 可
一图搞懂javascript中的this与call/apply/bind的6中关系
田兴的博客
07-22 4673
谈谈你对this、call、apply和bind的理解 详情可看另一篇文章JavaScript中的this、call、apply和bind 在浏览器里，在全局范围内this 指向window对象； 在函数中，this永远指向最后调用他的那个对象； 构造函数中，this指向new出来的那个新的对象； call、apply、bind中的this被强绑定在指定的那个对象上； 箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而
JS apply 、call和bind
05-21 134
JS当中的call 、apply、和bind 这三个方法都是js function当中自带的方法，用来改变this的指向。 call()方法 语法格式: fun.call(thisArg[,arg1[, arg2[, ...]]]) 该方法可以传递一个thisArgs参数和一个参数列表，thisArgs指定了函数在运行期的调用者，也就是函数中的this对象，而参数列表会被传入调用函数...
JS中的bind()方法
weixin_39214481的博客
11-02 3787
Function.prototype.bind()方法 bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()第一个参数的值，例如，f.bind(obj)，实际上可以理解为obj.f()，这时，f函数体内的this自然指向的是obj 例子 var a = {     b : function(){         var...
JS中改变this指向的方法(call和apply、bind)
10-22
本文将详细介绍三种在JavaScript中改变`this`指向的方法：`call`、`apply`以及`bind`。 1. `call`方法： 当我们需要在其他对象的上下文中执行某个函数时，可以使用`call`方法。`call`接受两个参数：第一个参数是想...
原生JS实现 call apply bind
01-08
都是用来改变this的指向，在平时工作过程中，除了实现对象的继承，在写一些基础类，或者公用库方法的时候会用到它们，其他时候 call 和 apply 的应用场景并不多。 在React中bind常用来绑定事件，改变this的指向 call...
JS 中 this 指向,call()、apply()、bind()
nilmao的博客
04-12 309
1. 箭头函数 箭头函数 this 不会被改变，所以只要当前函数是箭头函数，那么就不用再看其他规则了。 箭头函数的 this 是在创建它时外层 this 的指向。这里的重点有两个： 创建箭头函数时，就已经确定了它的 this 指向。 箭头函数内的 this 指向外层的 this。 箭头函数是不绑定this的，它的this来源于上级作用域 var user = { name: 'kiki', foo: () => { console.log('箭头函数中的this',th..
js bind
workhardupc
11-06 623
转自: http://www.prototypejs.org/api/function/bind bind bind(thisObj[, arg...]) -> Function Wraps the function in another, locking its execution scope to an object specified by thisObj.
js之bind
xclsky的博客
12-27 435
1 js中的bind的作用是为函数绑定对象，就是将函数赋予给该对象。 如：var first_obj={     num:24     };     var sencod_obj={     num:42     };         function chengfa(count){     return this.num*count;     }     var firs
js中的bind
scwMason的博客
10-07 328
最近在看一些大牛的Blog的时候自己总结了一下判断this的方法，举几个例子： 例一： var a = { b : function(){ var func = function(){ console.log(this.c); } func(); }, c : 'Hello!' } a.b(); //打印undefined 首先要看方法的调用者，这里面是a，所以看a...
js 中的bind
Jacoh的专栏
07-12 235
记录 Understanding JavaScript Bind ()
JS高级之this指向、call/apply/bind、闭包、递归
weixin_40581714的博客
11-04 845
03笔记 1.函数的定义和调用 1.1函数的定义方式 方式1 函数声明方式 function 关键字 (命名函数) function fn(){} 方式2 函数表达式(匿名函数) var fn = function(){} 方式3 new Function() var f = new Function('a', 'b', 'console.log(a + b)'); f(1, 2); var fn = new Function('参数1','参数2'..., '函数体') 注意 /*Fun
Js基础-this指向、call、apply、bind
jiangyoufu123456789的博客
02-28 99
一、this指向 本节精华： this指向是最后调用它的对象，即：看它执行的时候是谁调用。 严格版本中的默认this不再是window，而是undefined。 this应用场景大致以下几种： 作为对象的方法调用； 作为普通函数调用； 构造器调用； call 或 apply调用； 箭头函数中，this指向函数上层作用域的this； [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lK3cu8Cx-1614484970539)(/Users/mr.jiang/Deskt
JavaScript中call、apply、bind详解及手写实现
最新发布
to_the_Future的博客
03-31 1414
首先，我们都知道JavaScript中的this指向分为软绑定及硬绑定。并且this的指向与执行上下文有关系。在全局执行上下文中，this指向 全局对象（），在对象调用其内部方法时，this指向调用的地方，这就称为。那么如何使用呢？这就需要使用JavaScript中内置的方法来实现了。
js bind()
zyx的博客
03-15 508
var s = document.write;s("a");这样写出后 报错VM36:3 Uncaught TypeError: Illegal invocation    at &lt;anonymous&gt;:3:1因为s() 张样写的话 this的指向了全局 或window了 ，而页面的是dom操作，因此采用bind()方法将其在指向dom正确的方法是 s.bind(document)('...
JavaScript中apply、call、bind的this指向改变与应用
"这篇文章主要介绍了JavaScript中的apply、call和bind三个方法，它们的主要用途是改变函数内部this的指向。文章通过实例讲解了这三个方法的巧妙使用，并对比了call和apply的区别，同时也提到了bind的作用。" 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值