脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js this全面解析及常见实例

JavaScript中this的全面解析及常见实例

 更新时间：2019年05月14日 10:07:57   作者：heyushuo  
这篇文章主要给大家介绍了关于JavaScript中this的全面解析及常见实例的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

前言

this 关键字在 Javascript 中非常常见,但是很多开发者很难说清它到底指向什么。大部分人会从字面意思上去理解 this,认为 this 指向函数自身,实际上this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调
用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。

总结: 函数被调用时发生 this 绑定，this 指向什么完全取决于函数在哪里被调用。

一、this 的绑定规则

this 一共有 4 中绑定规则，接下来一一介绍每种规则的解释和规则直接的优先级

  • 默认绑定（严格/非严格模式）
  • 隐式绑定
  • 显式绑定
  • new 绑定

1.1 默认绑定（严格/非严格模式）

  • 独立函数调用： 独立函数调用时 this 使用默认绑定规则，默认绑定规则下 this 指向 window（全局对象）。
  • 严格模式下： this 无法使用默认绑定，this 会绑定到 undefined。

独立函数调用

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

严格模式下：

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

注意下边两种情况

var age = "18";
var obj = {
 name: "heyushuo",
 age: 25,
 fn: function() {
 function sayName() {
  console.log(this); //window
  console.log(this.age); //undefined
 }
 sayName();
 }
};
obj.fn();

函数 sayName 虽然是在 obj.fn 内部定义的，但是它仍然是一个独立函数调用，this 仍然指向 window。

var a = "global";
var obj = {
 a: 2,
 foo: function() {
 console.log(this.a); //global
 }
};
var bar = obj.foo; // 函数别名！
bar();

虽然 bar 是 obj.foo 的一个引用，但是实际上，它引用的是函数本身，因此此时的
bar() 其实是一个不带任何修饰的独立函数调用，因此应用了默认绑定。

1.2 隐式绑定

当函数引用有上下文对象时(例如:obj.foo 这个时候使用 obj 上下文来引用函数 foo)，隐式绑定规则会把函数中的 this 绑定到这个上下文对象。

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

obj.foo();

对象属性引用链中只有上一层或者说最后一层在调用中起作用。

var obj = {
 name: "heyushuo",
 obj1: {
 name: "kebi",
 foo: function() {
  console.log(this.name); // kebi
 }
 }
};

obj.obj1.foo();

隐式丢失

被隐式绑定的函数会丢失绑定对象，而应用默认绑定，把 this 绑定到全局对象或者 undefined(严格模式) 上。

第一种

var a = "global";
var obj = {
 a: 2,
 foo: function() {
 console.log(this.a); //global
 }
};
var bar = obj.foo; // 函数别名！
bar();

虽然 bar 是 obj.foo 的一个引用，但是实际上，它引用的是函数本身，因此此时的bar() 其实是一个不带任何修饰的独立函数调用，因此应用了默认绑定。

第二种传入回调函数时：

var a = "global";
var obj = {
 a: 2,
 foo: function() {
 console.log(this.a); //global
 }
};
var bar = obj.foo; // 函数别名！
function doFoo(fn) {
 fn(); // <-- 调用位置！
}
doFoo(bar); //global

//和下边这种一样
setTimeout(obj.foo, 300);

1.3 显示绑定

通过 call() 或者 apply()方法。第一个参数是一个对象，在调用函数时将这个对象绑定到 this 上，称之为显示绑定。

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

显示绑定引申出来一个硬绑定,代码如下

function foo(something) { 
 console.log( this.a, something ); 
 return this.a + something;
}
// 简单的辅助绑定函数
function bind(fn, obj) { 
 return function() {
 return fn.apply( obj, arguments ); //内部已经强制绑定了传入函数this的指向
 };
}
var obj = { 
 a:2
};
var bar = bind( foo, obj ); 
var b = bar( 3 ); // 2 3
console.log( b ); // 5

bar函数无论如何调用,它总会手动在 obj 上调用 fn,强制把 fn 的 this 绑定到了 obj。这样也解决前面提到的丢失绑定问题
由于硬绑定是一种非常常用的模式，所以在 ES5 中提供了内置的方法 Function.prototype.bind

function foo(something) { 
 console.log( this.a, something ); 
 return this.a + something;
}
var obj = { 
 a:2
};
var bar = foo.bind( obj );
var b = bar( 3 ); // 2 3 
console.log( b ); // 5

1.4 new绑定

使用new来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。

  • 创建（或者说构造）一个全新的对象。
  • 这个新对象会被执行 [[ 原型 ]] 连接。
  • 这个新对象会绑定到函数调用的 this。
  • 如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象。

例如:

function foo() { 
 this.name = "heyushuo";
 this.age = 25
} 
foo.prototype.sayName = function(){
 console.log(this.name+this.age);
}
var bar = new foo();

console.log(bar); //{name: "heyushuo", age: 25}
//这个新对象会绑定到函数调用的 this。所以此时的this就是bar对象
console.log( bar.age ); // 25

如下图是 new foo() 这个对象

二、四种绑定关系的优先级

判断this,可以按照下面的顺序来进行判断：

1、函数是否在 new 中调用（new 绑定）？如果是的话 this 绑定的是新创建的对象。

var bar = new foo()

2、函数是否通过 call、apply（显式绑定）或者硬绑定调用？如果是的话，this 绑定的是指定的对象。

var bar = foo.call(obj2)

3、函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this 绑定的是那个上下文对象。

var bar = obj1.foo()

4、如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到 undefined，否则绑定到全局对象。

var bar = foo()

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • uniapp中获取dom元素的方法及更改dom元素颜色踩坑记录

    uniapp中获取dom元素的方法及更改dom元素颜色踩坑记录

    最近学到了一个比较好用的框架uni-app,可以做六端适配,学习一下,下面这篇文章主要给大家介绍了关于uniapp中获取dom元素的方法及更改dom元素颜色踩坑记录的相关资料,需要的朋友可以参考下
    2023-03-03
  • Bootstrap每天必学之日期控制

    Bootstrap每天必学之日期控制

    Bootstrap每天必学之日期控制，对Bootstrap日期控制感兴趣的小伙伴们可以参考一下
    2016-03-03
  • JS实现HTML页面中动态显示当前时间完整示例

    JS实现HTML页面中动态显示当前时间完整示例

    这篇文章主要介绍了JS实现HTML页面中动态显示当前时间,结合完整实例形式分析了JavaScript使用时间函数setTimeout及clearTimeout动态显示当前时间相关操作技巧,非常简单实用,需要的朋友可以参考下
    2018-07-07
  • 一文解决微信小程序button、input和image表单组件

    一文解决微信小程序button、input和image表单组件

    在微信小程序开发中,input 用来实现文本输入,如输入用户名密码等等,下面这篇文章主要给大家介绍了关于如何通过一文解决微信小程序button、input和image表单组件的相关资料,需要的朋友可以参考下
    2022-08-08
  • JavaScript 对象成员的可见性说明

    JavaScript 对象成员的可见性说明

    与java等基于类的面向对象语言的private、protected、public等关键字的用途类似，基于对象的JavaScript语言，在对象构造上也存在类似的成员可见性问题。
    2009-10-10
  • 浅谈下拉菜单中的Option对象

    浅谈下拉菜单中的Option对象

    Option 对象代表 HTML 表单中下拉列表中的一个选项。在 HTML 表单中 <option> 标签每出现一次，一个 Option 对象就会被创建。您可通过表单的 elements[] 数组访问一个 Option 对象，或者通过使用 document.getElementById()。
    2015-05-05
  • js原生实现FastClick事件的实例

    js原生实现FastClick事件的实例

    下面小编就为大家带来一篇js原生实现FastClick事件的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • js将字符转换为UTF-8字符的工具

    js将字符转换为UTF-8字符的工具

    在下面的文本框中输入中文文字，按“转化”，即可将其转化为UTF-8字符。
    2010-06-06
  • Bootstrap基本组件学习笔记之分页(12)

    Bootstrap基本组件学习笔记之分页(12)

    这篇文章主要为大家详细介绍了Bootstrap基本组件学习笔记之分页,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • js实现贪吃蛇小游戏（容易理解）

    js实现贪吃蛇小游戏（容易理解）

    本文主要介绍了js实现贪吃蛇小游戏的步骤与方法，代码简单，容易理解。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-01-01

最新评论