`

JS this

    博客分类:
  • js
 
阅读更多
摘自:http://www.imooc.com/article/1758
原文作者:PHPBird



说到this,就不得不提到function,相信看过其它类似文章的同学也知道,正是由于调用function的对象不同,才导致了this的指向不同。所以以前老是去记忆每种调用function的情况所对应的this,因为情况有限而且很少,所以这当然是可行的——对于聪明人来说。所以我不得不思考另外一些方式来让我记住。
那么首先我们需要明确的一个事情是:function也是对象
同时我们还需要明确的一个事情是:function执行时是在某个特定的上下文中执行的。那什么是上下文呢?比如你要console.log(a),没有a就无法支持函数的执行,所以某种意义上讲,a就是上下文的一部分。函数执行时它也需要一些额外的信息来支撑它的运行。
既然function是对象的话,就会有方法。而function中最核心的方法是call方法,这也是理解this最关键的方法,因此我们就从这儿入手。
call方法
先来看一下如何使用call方法:
    function say(content) {
        console.log("From " + this + ": Hello "+ content);
    }
    say.call("Bob", "World"); //==> From Bob: Hello World
接下来仔细分析一下call的用法:
Step1: 把第二个到最后一个参数作为函数执行时要传入的参数
Step2: 把函数执行时的this指向第一个参数
Step3: 在上面这个特殊的上下文中执行函数
上面例子中,我们通过call方法,让say函数执行时的this指向"Bob",然后把"World"作为参数传进去,所以输出结果是可以预见的。
js执行函数时会默认完成以上的步骤,你可以把直接调用函数理解为一种语法糖
比如
    function say(word) {
       console.log(world);
    }
    say("Hello world");

    say.call(window, "Hello world");
以上可以把say("Hello world")看做是say.call(window,"Hello world")的语法糖。
这个结论非常关键
所以以后每次看见functionName(xxx)的时候,你需要马上在脑海中把它替换为functionName.call(window,xxxx),这对你理解this的指向非常重要。不过也有例外,在ES5的strict mode中call的第一个参数不是window而是undefined。之后的例子我假设总是不在strictmode下,但你需要记住strictmode有一点儿不同。
对于匿名函数来说,上面的结论也是成立的
    (function(name) {
        //
    })("aa");
    //等价于
    (function(name) {
        //
    }).call(window, "aa");
函数作为对象的方法被调用
直接来看代码:
    var person = {
        name : "caibirdme",
        run : function(time) {
            console.log(this.name + "has been running for over "+ time+ " minutes");
        }
    };
    person.run(30); //==> caibirdme has been running for over 30 minutes
    //等价于
    person.run.call(person, 30); // the same
你会发现这里call的第一个参数是person而不是window。
当你明白了这两点,下意识地把函数调用翻译成foo.call()的形式,明确call的第一个参数,那基本上this的问题就难不住你了。
还是来举几个例子吧
例一:
function hello(thing) { 
  console.log(this + " says hello " + thing);
}

person = { name: "caibirdme" } 
person.hello = hello;

person.hello("world") // 相当于执行 person.hello.call(person, "world")
//{name:"caibirdme"} says hello world

hello("world") // 相当于执行 hello.call(window, "world")
//[object DOMWindow] says hello world
例二:
var obj = {
    x: 20,
    f: function(){ console.log(this.x); }
};

obj.f(); // obj.f.call(obj)
//==> 20

obj.innerobj = {
    x: 30,
    f: function(){ console.log(this.x); }
}

obj.innerobj.f(); // obj.innerobj.f.call(obj.innerobj)
// ==> 30
例三:
var x = 10;
var obj = {
    x: 20,
    f: function(){
        console.log(this.x); //this equals obj
                // ==> 20
        var foo = function(){ console.log(this.x); }
        foo(); // foo.call(window)
                //foo中this被指定为window,所以==> 10
    }
};

obj.f();  // obj.f.call(obj)
// ==> 20 10
由例三引出一个非常common的问题,如果我想让foo输出20怎么办?这时候需要用到一点小技巧
例四:
var x = 10;
var obj = {
    x: 20,
    f: function(){
        console.log(this.x);
        var that = this; //使用that保留当前函数执行上下文的this
        var foo = function(){ console.log(that.x); } //此时foo函数中的this仍然指向window,但我们使用that取得obj
        foo(); // foo.call(window)
    }
};

obj.f(); obj.f.call(obj)
// ==> 20 20
再来一个稍微难一点点的(但其实用call替换法一点儿也不难)
例五:
var x = 10;
var obj = {
    x: 20,
    f: function(){ console.log(this.x); }
};

obj.f(); // obj.f.call(obj)
// ==> 20

var fOut = obj.f;
fOut(); // fOut.call(window)
//==> 10

var obj2 = {
    x: 30,
    f: obj.f
}

obj2.f(); // obj2.f.call(obj2)
//==> 30
例五有些同学会可能出错的原因,是没有明确我上面说的:
this是在执行是才会被确认的
他可能会认为说obj.f那个函数定义在obj里面,那this就该指向obj。如果看完这篇文章你还这么想的话,我会觉得我的表达水平太失败了……
用于构造函数
先看一段代码:
    func person(name) {
        this.name = name;
    }
    var caibirdme = new person("deen");
    // caibirdme.name == deen
我上面也说了,函数在用作构造函数时同样可以用call方法去代替,那这里怎么代替呢?
这里你又需要明确一点:
new constrcut()是一种创建对象的语法糖
它等价于
    function person(name) {
       this.name = name;
    }
    var foo = new person("deen");
    //通过new创建了一个对象
    //new是一种语法糖,new person等价于
    var bar = (function(name) {
        var _newObj = {
            constructor : person,
            __proto__ : person.prototype,
        };
        _newObj.constructor(name); // _newObj.constructor.call(_newObj, name)
        return _newObj;
    })();
So you can see……为什么new的时候this就指向新的对象了吧?
通过我这篇文章,我希望学会通过把一个函数调用替换成funcName.call的形式,从而理解运行时上下文中this到底指向谁。总结来说就是下面两个等价变形:
foo() ---> foo.call(window)
obj.foo() --> obj.foo.call(obj)


分享到:
评论

相关推荐

    Presentations-JavaScriptThis-源码.rar

    `Presentations-JavaScriptThis-源码.rar`或`.zip`文件很可能是关于这个主题的一份详细讲解材料,包含了一些示例代码和演示。 1. **`this`的基本概念**: `this`在JavaScript中用于引用当前执行上下文的对象,它的...

    js原生态函数中使用jQuery中的 $(this)无效的解决方法.docx

    js原生态函数中使用jQuery中的$(this)无效的解决方法 在JavaScript开发中,使用jQuery的$(this)在原生态函数中可能会出现无效的问题,本文将对此进行详细的分析和解决方法的介绍。 一、问题描述 在JavaScript开发...

    JavaScript this使用方法图解

    在JavaScript中,`this`关键字是一个非常重要的概念,它用于引用当前上下文中的对象。`this`的值在运行时确定,并且根据函数被调用的方式而改变。下面我们将深入探讨`this`的使用方法。 1. **全局作用域与浏览器...

    高手详解javascript中的this指针

    在JavaScript中,`this`关键字是一个至关重要的概念,它在不同上下文中有着不同的指向。`this`在JavaScript中并不像其他静态类型语言(如Java或C++)中的指针那样工作,而是根据函数调用的方式动态确定其值。以下是...

    详解Javascript 中的this指针

    ### 详解Javascript中的`this`指针 在深入探讨`this`指针之前,我们首先应当明确`this`在JavaScript中的基本概念与作用。`this`关键字在JavaScript中扮演了一个非常核心的角色,它是一个特殊的变量,用于引用调用...

    js this指向笔记.docx

    - 在全局作用域中,`this` 指向全局对象,在浏览器环境中是 `window`,在 Node.js 中是 `global`。 - 在函数调用中,如果函数不是一个方法(即没有被某个对象拥有),`this` 也会指向全局对象。 2. **隐式绑定**...

    Javascript this 函数深入详解

     本文对Javascript this函数进行详细介绍,及知识的总结整理,彻底明白js this 函数该如何使用。 this 代码函数调用时, .1直接调用函数则为this则指向window对象 .2类调用时候指向这个类 .3 方法.apply(obg) ;...

    javascript中this的指向问题总结

    JavaScript中this的指向还没搞明白?来这看看 你就懂啦~

    js this关键字_面向对象编程.pdf

    ### 面向对象的JavaScript编程:深入了解`this`关键字及类的实现 #### 引言 面向对象编程(Object-Oriented Programming, OOP)是一种编程范式,旨在通过对象来封装数据与操作这些数据的方法。JavaScript 作为一种...

    js中的this

    2. **函数没有所属对象(全局环境)**:在非严格模式下,如果函数不在任何对象作用域内被调用,`this` 指向全局对象(在浏览器中是 `window`,在 Node.js 环境中是 `global`)。例如: ```javascript function foo...

    【JavaScript源代码】vue 中this.$set 动态绑定数据的案例讲解.docx

    Vue.js 是一款流行的前端框架,它的核心特性之一是数据绑定。在 Vue 中,我们通常使用 `data` 选项来声明初始数据。然而,在某些场景下,我们可能需要在运行时动态地添加或修改数据属性,这时就需要用到 `this.$set`...

    javascript中onclick(this)用法介绍

    本文将详细介绍JavaScript中一种常见的事件处理用法——onclick(this)。 首先,我们需要理解什么是onclick事件处理器。在HTML中,onclick是一个事件属性,用于指定当元素被点击时将调用的JavaScript代码。这个属性...

    Presentations-JavaScriptThis

    在这个名为"Presentations-JavaScriptThis"的资料包中,很显然,我们将探讨"this"在JavaScript中的各种用法和应用场景。 首先,我们要明白"this"的基本概念。在JavaScript中,"this"引用的是函数调用时的执行上下文...

    JavaScript中this关键字使用方法详解

    在JavaScript编程语言中,`this`关键字是一个至关重要的概念,它常常引发初学者的困惑,因为它的值在不同的上下文中可能会有所不同。`this`关键字主要用来引用对象的上下文,或者说是当前执行环境中的对象。在本文中...

    vue.js this.$router.push获取不到params参数问题

    在Vue.js应用中,路由是页面之间导航的关键组成部分。`this.$router` 是Vue Router提供的一个实例,用于处理页面的导航。在这个问题中,开发者遇到了使用`this.$router.push`传递`params`参数时无法在目标页面获取到...

    Javascript的this用法

    ### JavaScript中的`this`用法详解 在JavaScript中,`this`关键字的使用十分常见,但也是最容易引起混淆的部分之一。正确理解`this`的工作原理对于编写高效、可靠的代码至关重要。本文将深入探讨`this`在不同上下...

    js this函数调用无需再次抓获id,name或标签名

    标题和描述提到的"js this函数调用无需再次抓获id,name或标签名",意味着通过正确使用`this`,我们可以避免频繁地使用`document.getElementById`、`document.getElementsByName` 或 `document.getElementsByTagName...

    JavaScript This指向问题详解

    这篇文章主要介绍了JavaScript This指向问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 各位小伙伴在面试中被面试官问道this指向问题一定不少吧,同时...

    Javascript的this详解

    JavaScript中的`this`关键字是一个非常重要的概念,它用于在函数执行时引用当前上下文的对象。在JavaScript中,`this`的绑定遵循四个主要规则:默认绑定、隐式绑定、显式绑定和new绑定。让我们逐一深入理解这些规则...

Global site tag (gtag.js) - Google Analytics