this的用法
  在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了.

  因为this的取值是执行上下文环境的一部分,每次调用函数,都会产生一个新的执行上下环境.举例说明

1. 构造函数之this

  function Foo() {
      this.name = "zhangsan";
      this.age = 20;
      console.log(this);
  }
  var f1 = new Foo();

说明:
 1. 如果函数作为构造函数使用,那么其中的this就代表它new出来的对象
 2. 如果函数作为普通函数调用,这种情况this是指window.

  function Foo() {
      this.name = "zhangsan";
      this.age = 20;
      console.log(this);
  }
  Foo();
  console.log(window.name);
  console.log(window.age);

2. 函数作为对象的一个属性
  如果函数作为对象的一个属性时,并且作为对象的一个属性被调用时,函数中的this指向该对

  var obj = {
      x:10,
      fn:function() {
          console.log(this.x);
      }
  };
  obj.fn();

  var obj = {
      x:10,
      fn:function() {
          console.log(this.x);
      }
  };
  var obj1 = {
      x:20
  };
  obj1.fn = obj.fn;
  obj1.fn();

3. 函数用call或apply调用
  当一个函数被call和apply调用时,this的值就去传入的对象的值

  var test = "Tony";
  function doSomething() {
      console.log(this.test);
  }
  var obj = {
      test:"Tom"
  };
  doSomething();
  doSomething.call(obj);//doSomething中的this指向obj

4. 全局&普通函数的调用
  在全局环境下,this指向的是window对象

    console.log(this === window);//true

  普通函数调用时,其中的this也是指向的window对象

  var x = 10;
  var fn = function() {
      console.log(this);//window
      console.log(this.x);//10
  };
  fn();
注意以下情况:虽然函数f是在obj对象内部定义的,但是他任然是一个普通函数,this指向的还是window对象.

  var x = 20;
  var obj = {
      x:10,
      fn:function() {
          function f() {
              console.log(this);
              console.log(this.x);
          }
          f();
      }
  };
  obj.fn();

5. 构造函数prototype
  this代表的是当前对象的值,不仅仅是在构造函数的prototype,即便是在整个原型链中.

  function Fn(name, age) {
      this.name = name;
      this.age = age;
  }
  Fn.prototype.sayName = function() {
      console.log(this.name);
  };
  var f1 = new Fn("zhangsan", 20);
  console.log(f1.name);

了解神奇的this的更多相关文章

  1. BZOJ 1006 【HNOI2008】 神奇的国度

    题目链接:神奇的国度 一篇论文题--神奇的弦图,神奇的MCS-- 感觉我没有什么需要多说的,这里简单介绍一下MCS: 我们给每个点记录一个权值,从后往前依次确定完美消除序列中的点,每次选择权值最大的一 ...

  2. 前端精选文摘:BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  3. MVC系列——MVC源码学习:打造自己的MVC框架(四:了解神奇的视图引擎)

    前言:通过之前的三篇介绍,我们基本上完成了从请求发出到路由匹配.再到控制器的激活,再到Action的执行这些个过程.今天还是趁热打铁,将我们的View也来完善下,也让整个系列相对完整,博主不希望烂尾. ...

  4. 一行神奇的javascript代码

    写本篇文章的缘由是之前群里@墨尘发了一段js代码,如下: (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~ ...

  5. [翻译svg教程]Path元素 svg中最神奇的元素!

    先看一个实例 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999 ...

  6. php isset( $test ) 的神奇之处。

    很久一段时间没更新博客了,由于近段时间一直在忙 挑战杯 的项目,所以没怎样把一些总结放上来.这次,总结下 php 的一个 函数 : boolean isset($test), 返回值:boolean类 ...

  7. 神奇的CSS3按钮特效

    点击这里查看效果 以下是源代码: <!doctype html> <html> <!-- author: @simurai --> <head> < ...

  8. 吉特仓库管理系统- 斑马打印机 ZPL语言的腐朽和神奇

    上一篇文章说到了.NET中的打印机,在PrintDocument类也暴露一些本质上上的问题,前面也提到过了,虽然使用PrintDcoument打印很方便.对应条码打印机比如斑马等切刀指令,不依赖打印机 ...

  9. JS开发HTML5游戏《神奇的六边形》(一)

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  10. 神奇的sort()函数

    今天来谈一谈sort()函数,sort() 方法用于对数组的元素进行排序,用法为arrayObject.sort(sortby):括号中的为可选参数,准确来说应该是一个函数,这个函数用来规定排序方法, ...

随机推荐

  1. C++ 常见容器

    迭代器. 基本介绍(来源于网络):迭代器是一种抽象的概念.能够遍历容器内的 部分/全部 元素.每个迭代器中包含着元素的地址.  它可以将 抽象容器 和 泛型算法 结合起来.   大致原理: 1)迭代器 ...

  2. XAMPP下重置mysql密码

    安装XAMPP后,mysql默认是没有密码的,安全起见一般我们都会修改密码. 密码太多,经常会忘记密码,那么,我们可以通过通过以下步骤可以重置mysql密码. 步骤如下: 1. 停止mysql 2.  ...

  3. c#局域网聊天软件的实现

    本软件是基于大学寝室局域网聊天的思路.c#源代码如下: using System; using System.Drawing; using System.Collections; using Syst ...

  4. pyinstaller打出的EXE包执行时报错“failed to excute ”信息

    我的程序是selenium自动化脚本,打包时执行的是 Python pyinstaller -F --onefile -w  XXX.py 这样打出的包执行后提示“failed to excute s ...

  5. ZigBee物理层协议规范

    在不同的国家和地区,ZigBee技术所允许使用的工作频率是不同的,而对于不同的应用频率范围,其调制方式.传输速率均不同,众所周知,蓝牙技术在世界多数国家都采用统一的频率范围,其范围为2.4GHz的IS ...

  6. Go语言语法汇总

    最近看了看GoLang,把Go语言的语法总结了一下,做个快速参考 数据类型 var varName type,var var1,var2… type,var varName type = Value, ...

  7. logstash 分析nginx 错误日志

    [root@dr-mysql01 frontend-error]# cat logstash_error.conf input { file { type => "zj_fronten ...

  8. Opencv下图像对鼠标事件的响应

    直接上代码: //////////////////////////////////////////////////////////////////////// // // 该程序从文件中读入一幅图像, ...

  9. KMP算法java实现

    /** * 假设现在文本串S匹配到 i 位置,模式串P匹配到 j 位置 如果j = -1,或者当前字符匹配成功(即S[i] == * P[j]),都令i++,j++,继续匹配下一个字符: 如果j != ...

  10. NSTimer你真的会用了吗

    http://www.cnblogs.com/smileEvday/archive/2012/12/21/NSTimer.html