1 当函数作为对象的方法被调用的时候 this就指向该对象

var o = {

  prop: 37,

  f: function() {

    return this.prop;

  }

};

console.log(o.f()); // logs 37

上面的例子中，当 o.f() 被调用时，函数内的this将绑定到o对象。

在何处或者如何定义调用函数完全不会影响到this的行为。在上一个例子中，我们在定义o的时候为其成员f定义了一个匿名函数。但是，我们也可以首先定义函数然后再将其附属到o.f。这样做this的行为也一致：

var o = {prop: 37};

function independent() {

  return this.prop;

}

o.f = independent;

console.log(o.f()); // logs 37

这说明this的值只与函数 f 作为 o 的成员被调用有关系。

类似的，this 的绑定只受最靠近的成员引用的影响。在下面的这个例子中，我们把一个方法g当作对象o.b的函数调用。在这次执行期间，函数中的this将指向o.b。事实上，这与对象本身的成员没有多大关系，最靠近的引用才是最重要的。

o.b = {

  g: independent,

  prop: 42

};

console.log(o.b.g()); // logs 42

2 作为普通函数调用的时候 thi指向全局对象window

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="div1"></div>

<script>

    window.id = 'window';

    document.getElementById('div1').onclick = function () {

        console.log(this.id); //div1

        var cb = function () {

            console.log(this.id);

        };

        cb(); //window

    }

</script>

</body>

</html>

上述代码中的document.getElementById('div1')返回一个dom元素对象，所以该点击监听事件作为该对象的方法调用，this指向id为div1的dom元素对象，this.id为div1；

而点击事件中的函数cb是普通函数，所以this指向window，this.id为window。

3 在严格模式下this不会指向全局对象，而是undefined ， 如下：

function func () {

  'use strict';

 console.log(this === undefined);

}

func();  // true

4 丢失的this

var obj = {

        name: 'peak',

        getName: function () {

            return this.name;

        }

    };

    console.log(obj.getName()); // peak

    var getNm = obj.getName;

    console.log(getNm()); // undefined
调用obj.getName时 getName方法作为obj对象的方法被调用 此时this指向obj对象
当obj.getName 赋值给 getNm 时 调用getNm 是作为普通函数的调用 此时this指向全局对象window

5 构造函数中的this

如果函数和new关键字一起使用，则这个函数称为构造函数。在函数内部，this会指向新创建的对象。

    function Foo(){

        this.name = "foo";

    }

    Foo.prototype.sayHello = function(){

        console.log('hello,'+this.name)

    };

    var foo = new Foo();

    foo.sayHello;  // hello,fo

上述代码中this则指向新创建的对象foo

注意：构造器可以手动设置返回其他的对象，如果返回值不是一个对象，则返回this,否者，返回该对象。

function C2(){

  this.a = 37;

  return {a:38};

}

o = new C2();

console.log(o.a); /

6 使用apply、call显示的设置this

function foo(a, b, c) {}

var bar = {};

foo.apply(bar, [1, 2, 3]); // 数组将作为函数的参数被接收，如下所示

foo.call(bar, 1, 2, 3); // 传递到foo的参数是：a = 1, b = 2, c = 3

当使用 Function.prototype 上的 call 或者 apply 方法时，函数内的 this 将会被 显式设置为函数调用的第一个参数。

因此函数调用的规则在上例中已经不适用了，在foo 函数内 this 被设置成了 bar。

使用 call 和 apply 函数的时候要注意，如果传递的 this 值不是一个对象，JavaScript 将会尝试使用内部 ToObject 操作将其转换为对象。因此，如果传递的值是一个原始值比如 7 或 'foo' ，那么就会使用相关构造函数将它转换为对象，所以原始值 7 通过new Number(7)被转换为对象，而字符串'foo'使用 new String('foo') 转化为对象，例如：

function bar() {

  console.log(Object.prototype.toString.call(this));

}

bar.call(7); // [object Number]

7 bind 方法

ECMAScript 5 引入了Function.prototype.bind。调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。

function f(){

  return this.a;

}

var g = f.bind({a:"azerty"});

console.log(g()); // azerty

var o = {a:37, f:f, g:g};

console.log(o.f(), o.g()); // 37, azerty

注意: 在对象的字面声明语法中，this 不能用来指向对象本身。 因此 var obj = {me: this} 中的 me 不会指向 obj，因为 this 只可能出现在上述的五种情况中。 这个例子中，如果是在浏览器中运行，obj.me 等于 window 对象。

 

对js中this的一点点理解的更多相关文章

  1. js中的回调函数的理解和使用方法

    js中的回调函数的理解和使用方法 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为 ...

  2. js中的闭包之我理解

    闭包是一个比较抽象的概念,尤其是对js新手来说.书上的解释实在是比较晦涩,对我来说也是一样. 但是他也是js能力提升中无法绕过的一环,几乎每次面试必问的问题,因为在回答的时候.你的答案的深度,对术语的 ...

  3. JS 中 call 和 apply 的理解和使用

    本文受到了知乎问题 如何理解和熟练运用js中的call及apply? 的启发. obj.call(thisObj, arg1, arg2, ...); obj.apply(thisObj, [arg1 ...

  4. js中prototype，constructor的理解

    连看4篇前辈的文章,记录一些知识点 Javascript继承机制的设计思想 Javascript 面向对象编程(一):封装 Javascript面向对象编程(二):构造函数的继承 Javascript ...

  5. js中的回调函数的理解

    一,常见的但是不是特别注意的回调方法. 1.1,ajax $.ajax({ url:"test.json", type: "GET", data: {usern ...

  6. js中对同步和异步的理解

    你应该知道,javascript语言是一门“单线程”的语言,不像java语言,类继承Thread再来个thread.start就可以开辟一个线程,所以,javascript就像一条流水线,仅仅是一条流 ...

  7. 关于JS中apply方法的基本理解

    最近研究OpenLayers源码时,发现其中使用了比较多的apply方法,对其也是很不明白.于是上网经过多方面了解以及自己细细体会后,终于算是基本明白是其干什么的了,这里分享下.apply方法的造型是 ...

  8. JS中面向对象的，对象理解、构造函数、原型、原型链

    6.1 理解对象 6.1.1 对象属性类型 ECMS属性有两种类型:数据属性和访问器属性 1 数据属性 [[configurable]] 表示能否通过Delete 删除属性从而从新定义属性,能否修改属 ...

  9. js中立即执行函数写法理解

    在理解了一些函数基本概念后,回头看看( function(){…} )()和( function (){…} () )这两种立即执行函数的写法,最初我以为是一个括号包裹匿名函数, 并后面加个括号立即调 ...

随机推荐

  1. JS函数无响应

    自己定义了一个函数,比如说叫 addClass(),当按钮单击的时候响应 在添加了一些第三方Open JS API后就没反应了 原因分析:在代码没变动的情况下,很有可能是自己定义的函数名和第三方的冲突 ...

  2. Xdebug+ZendStudio配置

    原文链接:http://www.orlion.ga/689/ 好久之前就知道有这么个东西,但是一直没用,一直用exit().var_dump() debug,效率很低. 首先下载xdebug的dll文 ...

  3. Hibernate的数据查找，添加！

    1.首先看一下测试数据库的物理模型 2.测试所需要的Hibernate的jar包 3.数据库的sql /*=============================================== ...

  4. Mobile Web中URL设计问题

    自己虽然也注册了CSDN账号,但是没有在上面发表过博客等内容.不过经常在Google里面搜索相关内容时,会显示csdn的结果.这也说明国内很多IT人员都会在CSDN发表博客,记录解决问题过程或者想法. ...

  5. 【经验之谈】Windows环境下配置WordPress

    前言 wordpress全球著名的开放博客平台,拥有成千上万个各式插件和不计其数的主题模板样式,使用php和mysql搭建,下面说下载windows环境下配置wordpress,经验之谈. 安装 关于 ...

  6. php变量－单引号不编译，双引号编译

    <?php header("Content-type:text/html;charset='utf8'"); error_reporting(E_ALL); $sTemp = ...

  7. 用jekyll制作高大上的网站（一）——安装与配置

    很多人会制作自己的主页,页面美观简洁,一直很在意是怎么做的. 最近公司需要做个文档库的主页,就研究了一些开源的工具,后面发现了jekyll(读杰克尔),将纯文本转换为静态博客网站. 一.Ruby je ...

  8. python mock基本使用

    什么是mock? mock在翻译过来有模拟的意思.这里要介绍的mock是辅助单元测试的一个模块.它允许您用模拟对象替换您的系统的部分,并对它们已使用的方式进行断言. 在Python2.x 中 mock ...

  9. WebGIS中解决使用Lucene进行兴趣点搜索排序的两种思路

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 目前跟信息采集相关的一个项目提出了这样的一个需求:中国银行等 ...

  10. HTTP图解（大牛必经之路）

    本节内容 俗话说好的开发,底层知识必须过硬,不然再创新的技术,你也理解不深入,比如python web开发工程师,想要学习任何一个框架,底层都是http和socket,底层抓牢了,学起来会很轻松,所以 ...