js中this的详细解释,JavaScript中this绑定规则【你不知道的JavaScript】

时间: 2017-11-16阅读: 810标签: this

调用栈 和 调用位置

每个函数的this是在调用时被绑定的,完全取决于函数的调用位置(也就是函数的调用方法)。

在理解this的绑定过程之前,首先要理解调用位置和调用栈;因为 调用位置 就在 当前正在执行的函数 的 前一个调用 中。

什么是调用栈和调用位置
调用位置:调用位置就是函数在代码中被调用的位置(而不是声明的位置)。
调用栈:就是为了到达当前执行位置所调用的所有函数。

function baz() {
    // 当前调用栈是:baz
    // 因此, 当前调用位置是全局作用域
    console.log( "baz" );
    bar(); // <-- bar的调用位置
} 
function bar() {
    // 当前调用栈是baz -> bar
    // 因此, 当前调用位置在baz中
    console.log( "bar" );
    foo(); // <-- foo的调用位置
} 
function foo() {
    // 当前调用栈是baz -> bar -> foo
    // 因此, 当前调用位置在bar中
    console.log( "foo" );
} 
baz(); // <-- baz的调用位置


this绑定规则1:默认模式

分析代码:

function foo() {
    console.log( this.a );
    //this通过默认绑定指向全局对象
} 
var a = 2;
foo(); // 2

function foo() {
    "use strict";
    console.log( this.a ); 
    //严格模式(strict mode)全局对象将无法使用默认绑定
} 
var a = 2;
foo(); // TypeError: this is undefined

解释:

可以把这条规则看作是无法应用其他规则时的默认规则。

当调用foo()时,this.a被解析成了全局变量a。为什么?因为在本例中,函数调用时应用了this的默认绑定,因此this指向全局对象。

foo()是直接使用不带任何修饰的函数引用进行调用的,因此只能使用默认绑定,无法应用其他规则。

如果使用严格模式(strict mode),那么全局对象将无法使用默认绑定,因此this会绑定到undefined


this绑定规则2:隐式绑定

分析代码:

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

解析:

无论是直接在obj中定义还是先定义再添加为引用属性,foo严格来说都不属于obj对象。

调用位置会使用obj上下文来引用函数,因此你可以说函数被调用时obj对象“拥有”或者“包含”它。

当函数引用有上下文对象时,隐式绑定规则会把函数调用中的this绑定到这个上下文对象。

对象属性引用链中只有最接近(包含层)会影响调用位置。

隐式丢失

function foo() {
    console.log( this.a );
} 
var obj = {
    a: 2,
    foo: foo
};
var bar = obj.foo; // 函数别名!
var a = "oops, global"; // a是全局对象的属性

if(bar === obj.foo){
    console.log('true'); //true
    console.log(typeof bar) //function
    console.log(typeof obj.foo)  //function
}else {
    console.log('false')
} 

bar(); // "oops, global"
obj.foo();// 2

//等价的两个函数,输出不一样的结果。为什么?
//其实var bar === window.bar; 它隐式绑定了window 对象,所以它访问到的自然是 window.a

解析:虽然bar是obj.foo的一个引用,但是实际上,它引用的是foo函数本身,因此此时的bar()其实是一
个不带任何修饰的函数调用,因此应用了默认绑定。这种情况是不可以预料的。

还有一种 this 丢失=》 回调函数

回调函数丢失this绑定是非常常见的

function foo() {
console.log( this.a );
}
function doFoo(fn) {
    // fn其实引用的是foo
    fn(); // <-- 调用位置!
} 
var obj = {
    a: 2,
    foo: foo
};
var a = "oops, global"; // a是全局对象的属性
doFoo( obj.foo ); // "oops, global"


this绑定规则3:显式绑定

分析代码:

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

通过foo.call(..),我们可以在调用foo时强制把它的this绑定到obj上

硬绑定

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

bind(..)会返回一个硬编码的新函数,它会把参数设置为this的上下文并调用原始函数。


this绑定规则4:new绑定

JavaScript,构造函数只是一些使用new操作符时被调用的函数。它们并不会属于某个类,也不会实例化一个类。实际上,它们甚至都不能说是一种特殊的函数类型,它们只是被new操作符调用的普通函数而已。

使用new来调用函数时的行为

创建(或者说构造)一个全新的对象

新对象会被执行[[原型]]连接。

这个新对象会绑定到函数调用的this。

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

function foo(a) {
    this.a = a;
} 
//new对普通函数的构造调用,默认行为:创建一个新对象,获得对this的所有引用,返回新对象。
var bar = new foo(2);
console.log( bar.a ); // 2

//以上函数 相当于下面的函数

function foo(a){
    var obj = {};
    obj.a = a;
    reture obj
}
var bar = foo(2);
console.log( bar.a ); // 2

解析:使用new来调用foo(..)时,我们会构造一个新对象并把它绑定到foo(..)调用中的this上。


绑定优先级 和判断步骤

显式绑定 > 隐式绑定
bind硬绑定 > new绑定 > 隐式绑定

函数是否在new中调用(new绑定)?如果是的话this绑定的是新创建的对象。

var bar = new foo()

函数是否通过call、apply(显式绑定)或者硬绑定调用?如果是的话,this绑定的是指定的对象。

function foo(a) {
    this.a = a;
}
var obj = {
    a:2
}

//因为强制改变了foo 的上下文,this 显示绑定 为 obj;所以改变的是obj.a 的值

console.log(obj.a); //3
```

函数是否在某个上下文对象中调用(隐式绑定)?如果是的话,this绑定的是那个上下文对象。

var bar = obj1.foo()

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

var bar = foo()
站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/117

Js中常见this指向问题

无论是工作或者面试中,this指向问题是经常遇到的。所以这篇文章把常见的指向问题列出来给大家,避免踩坑。首先我们要知道,在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了,也就是说,this的指向完全取决于函数调用的位置

this指针

javascript中this指针是动态的,主要是根据当前函数执行上下文及函数调用方式决定的.以函数方法调用时this指针全局或严格模式中为undefined,以方法调用时this是指针当前对象实例的.以构造函数方式时this指向当前创建的实现对象。

Js中this的绑定规则

对于 JavaScript 新手来说,this 是非常基础同时也难以理解的知识点。比如下面的代码,this 指向就有三种方式。默认情况下,this 指向全局对象。例如下面的代码。

如何修复Vue中的 “this is undefined” 问题

一个可能的原因是混淆了常规函数和箭头函数的用法,如果你遇到这个问题,我猜你用的是箭头函数。如果用常规函数替换箭头函数,它可能会为你修复这个问题。我们再深入一点,试着理解为什么会这样。

This is this

this的指向是JavaScript中一个经久不衰的热门问题,在不同的场景下指向规则也不同,在此本文总结了this在不同场景下的指向规则以及ES6中新增的箭头函数中this的指向问题

Js中this指向问题(函数的调用方式)

在ES6之前,函数内部的this是由函数的调用方式决定的。构造函数调用 ,这时 p.say 属于Object,为Object的实例。this:say构造函数的实例,实例中并没有age属性,值为:undefined

JavaScript 中的 this 全面解析

this的指向问题应该是让每一个前端er都头疼的问题,我也一样,曾经遇到甚至都是一顿乱猜。最近在研读一些书籍如《你不知道的JavaScript》和《JavaScript语言精粹与编程实践》,让我对this的问题豁然开朗

JavaScript this 关键词

JavaScript this 关键词指的是它所属的对象。它拥有不同的值,具体取决于它的使用位置:在方法中,this 指的是所有者对象。单独的情况下,this 指的是全局对象。

寻找this绑定对象?找到调用栈&调用位置

经常听到这么一句话,找this只需要看 谁是调用方 。当函数被调用时会记录函数调用调用方式、传参包括this等各种属性。有时候 this 绑定对象情况太抽象,找到准确的 调用方 还是有一定的难度。

理解 JS 中的 This, Bind, Call, 和 Apply

尽管这this是一个复杂的话题,但它也是在您开始编写第一个JavaScript程序后立即出现的话题。在本文中,您将了解什么this是指隐含根据上下文,您将学习如何使用bind,call和apply方法,明确确定的值this。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广