资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Javascript基础之-this

Javascript基础之-this

lcodecorex / 2683人阅读

摘要：应该算是前期比较容易混淆的一个关键字了，在这里，我就打算按照我的理解来说一下首先呢，的值是跟运行时被调用的位置相关的，而不是词法作用域。来一个例子在浏览器中执行，会发现，如果作为一个函数多带带调用，那么指向的就是全局对象。

this应该算是前期比较容易混淆的一个关键字了，在这里，我就打算按照我的理解来说一下

首先呢，this的值是跟运行时被调用的位置相关的，而不是词法作用域。

也就是说，他的绑定的值很可能是动态的，不同的调用位置，很可能值就不一样，比如说：

function foo() {
  console.log(this.a);
}
var a = 2;
var obj = {
  a: 3,
  foo,
}
foo();   //2
obj.foo();   //3
var c = obj.foo;
c();   //2

然后你会惊讶的发现，foo()通过不同的形式调用，他最终的值是不一样的，咱们这一节主要就来讲一讲他们里面的这些绑定的规则

默认绑定

独立的函数调用，它的作用域是作用在全局的，这种绑定规则最常见并且是优先级最低的一种绑定规则。来一个例子

function foo() {
  console.log(this.a);   //2
  console.log(this === window);  //true
}
var a = 2;
foo();

在浏览器中执行，会发现，如果foo()作为一个函数多带带调用，那么this指向的就是全局对象windows。

但是呢，也有一种例外，如果函数使用的严格模式的话，那么全局对象讲无法使用默认绑定，this将会绑定到undefined，还是刚才的例子：

function foo() {
  "use strict"
  console.log(this.a);
  console.log(this === window);
}
var a = 2;
foo();  //Uncaught TypeError: Cannot read property "a" of undefined

可以看到，foo直接抛出一个error，说this是undefined，取不到a，如果用到严格模式的时候，可以稍微注意下这个区别

咱们刚刚的例子，说的是函数内用严格模式的话，讲无法使用默认绑定，那么如果是在函数调用位置用严格模式，会受影响吗

function foo() {
  console.log(this.a);      //2
  console.log(this === window);   //true
}
var a = 2;
(function () {
  "use strict"
  foo();
})();

很明显，可以看出，是不受影响的，还有一个问题，如果把var定义变成let会怎么样呢

function foo() {
  console.log(this.a);      //undefined
  console.log(this === window);   //true
}
let a = 2;
(function () {
  "use strict"
  foo();
})();

也就是说，let定义并不会加到全局变量中，这个和var的区别需要稍微留意一下

隐式绑定

这一条规则考虑的是是否有上下文对象，举个例子

function foo() {
  console.log(this.a);  //2
  console.log(this === obj); // true
}
var obj = {
  a: 2,
  foo,
}
obj.foo();

在这种情况下，foo会使用obj的上下文对象来引用函数，此时的this指向的就是obj。

那么如果是嵌套对象这种的，会怎么处理呢？

function foo() {
  console.log(this.a);   // 1
  console.log(this === obj) //  true
  console.log(this === obj1) // fale
}
var obj = {
  a: 1,
  foo,
};
var obj1 = {
  a: 2,
  obj,
}
obj1.obj.foo();

可以看到，实际上此时foo中的this指向了离他最近的对象obj，也就是说，对象属性引用链的最后一层会影响它的调用位置

还有一种情况。

function foo() {
  console.log(this.a);
}
var obj = {
  a: 3,
  foo,
}
var a = 2;
var f = obj.foo;
f(); // 2

这种情况下，虽然f是obj.foo的引用，但是最后依然用的是默认绑定，而不是隐式绑定，所以说呢，咱们可以这么理解，虽然他是对象中函数的引用，但是在执行的时候，调用的方式确是函数调用的方式，不是对象.属性()的方式，这块在使用的时候需要注意一下

显式绑定

很简单，显式绑定就是手动直接改变其this指向的一种方式，这个主要是用几种api来实现的

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
};
foo.call(obj);
foo.apply(obj);
var f = foo.bind(obj);
f();

这个就是显式绑定的常见的三种形式

这三种形式的话，call和apply差不多，就不展开了，详情看文档就行，咱们仔细看一下bind函数，来在看一个例子

function foo(num1, num2) {
  console.log(num1 + num2);  //5
  console.log(this === obj);    // true
}
var obj = {
  a: 1,
};
var f = foo.bind(obj, 2);
f(3);

这个可以看出，bind的用法和call以及apply还是有一些差别的。

注意，如果显式绑定传入的是null或者是undefined的话，将会使用默认绑定规则，举个例子

function foo() {
  console.log( this.a );
}
var a = 2;
foo.call( null ); // 2

new绑定

这个主要是new 函数()的绑定形式的，这个的this指向的是函数构造出的那个对象，new的时候，它的执行过程可以大概执行以下几步

创建一个全新的对象

这个新对象会被执行prototype连接

新对象绑定到函数调用的this

如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象

注意最后一句话，如果函数没有返回对象，那么就会返回函数调用的新对象，如果返回了一个对象呢，那么结果就是直接返回这个对象

var abc = {
  a: 10
}
function foo() {
  return abc;
}
foo.prototype = {
  b: 20
};
var a = new foo();
console.log(a === abc);   // true
console.log(a.b);         // undefined
function bar() {
  this.a = 10;
}
bar.prototype = {
  b: 20
};
var b = new bar();
console.log(b.a);   //  10
console.log(b.b);   // 20

以上四种常见的this绑定方式已经介绍的差不多了，那么问题来了，谁的优先级更高呢

很明显，默认绑定的优先级最低，就不展开说了

显式绑定与隐式绑定哪个优先级高呢，举个例子

function foo() {
  console.log( this. a );
}
var obj1 = {
  a: 2,
  foo: foo
};
var obj2 = {
  a: 3,
  foo: foo
};
obj1.foo(); // 2
obj2.foo(); // 3
obj1.foo.call( obj2 ); // 3
obj2.foo.call( obj1 ); // 2

很明显，显式绑定优先级要高于隐式绑定

那么new绑定和显式绑定谁更高呢，来再看个例子

function foo(something) {
  this.a = something;
}
var obj1 = {};
var bar = foo.bind( obj1 );
bar( 2 );
console.log( obj1.a ); // 2
var baz = new bar(3);
console.log( obj1.a ); // 2
console.log( baz.a ); // 3

很明显，new的优先级会更高

所以，这样的话，优先级排序就出来了，分别为

new绑定 　>　显式绑定　＞　隐式绑定　＞　默认绑定

以上就是大家常用到的几种，不过es6出现了一种箭头函数，箭头函数理论上不能应用上面四种的任意一种，它的this是根据代码的词法作用域来走的，比如说

function foo() {
  return (a) => {
    console.log( this.a );
  };
}
var obj1 = {
  a: 2
};
var obj2 = {
  a: 3
};
var bar = foo.call( obj1 );
bar.call( obj2 ); // 2

结果已经很明显了，

好了，以上内容就讲完了，通过我的一些讲解，是不是有一点理解了呢，如果有任何的不同意见，欢迎讨论哦

参考书籍《你不知道的Javascript》上卷

转载自：http://www.lht.ren/article/4

服务器托管 专线服务 javascript的this javaScript中的this javascript中this详解 之基础篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108856.html

相关文章

  • javascript基础之this

    摘要：出现箭头函数的时候，指向为定义时的上下文对象而非指向时，并且不能被改变首先我们先看一个例子由上面的例子我们可以看出来此时指针在用改变了之后指向的依然是全局对象非严格浏览器环境中是而非。 javascript基础之this指针 越往后面学越发现基础的重要性，所以打算重新过一遍基础，之后出几个vue和react的实战教程。ok，严归正传。 首先什么是this this是执行上下文创建时确定...

    Zoom 评论0 收藏0

  • javascript 基础之 call, apply, bind

    摘要：系统，扎实的语言基础是一个优秀的前端工程师必须具备的。第一个参数为调用函数时的指向，随后的参数则作为函数的参数并调用，也就是。和的区别只有一个，就是它只有两个参数，而且第二个参数为调用函数时的参数构成的数组。 系统，扎实的 javascript 语言基础是一个优秀的前端工程师必须具备的。在看了一些关于 call，apply，bind 的文章后，我还是打算写下这篇总结，原因其实有好几个。...

    xeblog 评论0 收藏0

  • 基础知识 - 收藏集 - 掘金

    摘要：本文是面向前端小白的，大手子可以跳过，写的不好之处多多分钟搞定常用基础知识前端掘金基础智商划重点在实际开发中，已经非常普及了。 JavaScript字符串所有API全解密 - 掘金关于 我的博客：louis blog SF专栏：路易斯前端深度课 原文链接：JavaScript字符串所有API全解密 本文近 6k 字，读完需 10 分钟。 字符串作为基本的信息交流的桥梁，几乎被所有的编程...

    wdzgege 评论0 收藏0

  • JS基础之常用小技巧和知识总结(一)

    摘要：如果有一方是布尔值，则转换为，转换为，再进行判断。等同运算符类型不同返回类型相同如果同为数字字符串则比较值如果同为布尔值，相同则为不同为如果两个操作数同为引用类型，且引用的为同一个对象函数，数组，则相同。 本文主要记录平时开发遇到的知识点和小技巧 相等判断(==) 类型相同： 判断其值是否相同 类型不同： 1. 如果数字和字符串比较， 则字符串会被隐式转换为数字，在做判断。 2....

    dadong 评论0 收藏0

  • JavaScript基础之创建对象、原型、原型对象、原型链

    摘要：在最开始的时候，原型对象的设计主要是为了获取对象的构造函数。同理数组通过调用函数通过调用原型链中描述了原型链的概念，并将原型链作为实现继承的主要方法。 对象的创建 在JavaScript中创建一个对象有三种方式。可以通过对象直接量、关键字new和Object.create()函数来创建对象。 1. 对象直接量 创建对象最直接的方式就是在JavaScript代码中使用对象直接量。在ES5...

    wangbjun 评论0 收藏0

发表评论

登陆后可评论

0条评论

lcodecorex

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<