http://blog.csdn.net/itpinpai/article/details/51004266

this关键字
本意:这个、这里的意思.
在JavaScript中是指每一个方法或函数都会有一个this对象,this对象是方法(或函数)在执行时的那个环境,也可以说是这个函数在那个作用域下运行的

一共有四种调用模式:方法调用模式(对象属性模式)、函数调用模式(就是普通的函数执行)、构造调用模式(应该叫实例上的方法模式更好)和apply调用模式。

一、方法调用模式
当它为一个对象上的方法的时候,this是当前这个对象

function age() { alert(this); }
var person = new Object();
person.age = age;
这里的this指向的就是创建的这个person对象

二、函数调用模式
当函数并非一个对象的属性时,那么它被当做一个函数来调用。此模式下this绑定到全局对象
var a = 1;
function fn() {
  console.log( this.a );
}
fn(); // 1 
fn函数中的this指定的是全局对象,全局对象是window

三、构造函数调用模式
在构造函数里的this是指向这个对象

function  Person( age ) {
  this.age = age;
}
var person = new Person(15);
console.log(person.age); // 15

四、apply调用模式
apply是把一个函数当成另一个对象的方法来调用

function age() {
  console.log(this.age);
}
function Person() {
  this.age = 18;
}
var person =  new Person();
age.apply(person); // 18

一.函数调用,此时this是全局的也就是window
  var c=function(){
   alert(this==window)
  }
  c()//true

二.方法调用
 var myObj={
  value:2,
  inc:function(num){
   alert(this.value+num);
  }
 }

myobject.inc(1); //结果3,因为this指向myObj

注意:内部匿名函数不属于当前对象的函数,因此this指向了全局对象window

var myObj={
name:'myObject',
value:0,
increment:function(num){
this.value += typeof(num) ==='number'? num:0;
},
toString:function(){
return '[object:'+this.name+'{value:'+this.value+'}]';
}, getInfo:function(){
return (function(){
return this.toString();//内部匿名函数不属于当前对象的函数,因此this指向了全局对象window
})();
}
}
alert(myObj.getInfo());//[object window];
点击看结果
解决方法:
var myObj={
name:'myObject',
value:0,
increment:function(num) {
this.value += typeof(num) ==='number' ? num : 0;
},
toString:function() {
return '[object:'+this.name+'{value:'+this.value+'}]';
},
getInfo:function(){
var This=this;//先把当前的this指向存起来
return (function(){
return This.toString();
})();
}
}
alert(myObj.getInfo());//[Object:myObject {value:0}]
点击看结果 三.用new关键字来新建一个函数对象的调用,this指向被绑定到构造函数的实例上 var fn = function (status){
this.status = status;
}
fn.prototype.get_status = function(){
return this.status;
}
var test = new fn('my status');
alert(test.get_status);//my status,this指向test
四.apply/call调用
function MyObject(name){
this.name=name ||'MyObject';
this.value=0;
this.increment=function(num){
this.value += typeof(num) === 'number' ? num : 0;
};
this.toString=function(){
return '[Object:'+this.name+' {value:'+this.value+'}]';
};
this.target=this;
}
function getInfo(){
return this.toString();
}
var myObj=new MyObject();
alert(getInfo.apply(myObj));//[Object:MyObject {value:0}],this指向myObj
alert(getInfo.apply(window));//[object Window],this指向window
通过call和apply可以重新定义函数的执行环境,即this的指向,这对于一些应用当中是十分常用的。
点击看结果

【转】JavaScript中的this关键字使用的四种调用模式的更多相关文章

  1. javascript中函数的四种调用模式详解

    介绍函数四种调用模式前,我们先来了解一下函数和方法的概念,其实函数和方法本质是一样,就是称呼不一样而已.函数:如果一个函数与任何对象关系,就称该函数为函数.方法:如果一个函数作为一个对象属性存在,我们 ...

  2. js中this的四种调用模式

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. JavaScript (JS) 函数补充 (含arguments、eval()、四种调用模式)

    1. 程序异常 ① try-catch语法    测试异常 try-catch语法代码如下: try { 异常代码;     try中可以承重异常代码, console.log(“try”)  出现异 ...

  4. javascript函数的四种调用模式及其this关键字的区别

    方法调用模式: 当一个函数被保存为对象的一个属性时,我们称它为一个方法.当一个方法被调用时,this被绑定到该对象. //方法调用模式 var myObject = { value: 0 , incr ...

  5. this与JavaScrip中的四种调用模式

    this是什么 方法调用模式 构造器调用模式 函数调用模式 apply/call模式 this是什么 —In most languages, ‘this’ is a reference to the ...

  6. ThinkPHP中U方法与url的四种访问模式

     ThinkPHP中U方法的用处主要是完成对url地址的组装,在模板中使用U方法而不是固定写死URL地址的好处在于,一旦你的环境变化或者参数设置改变,你不需要更改模板中的任何代码.在模板中的调用格式需 ...

  7. Javascript四种调用模式中的this指向

    第一种:函数直接调用执行的模式 function add(a,b){ console.log(this); return a+b; } add(,) //this===window 这里的this指向 ...

  8. 关于javascript中this 指向的4种调用模式

    this指向问题绝对可以排js 的top 5最难和最重点的问题,初学者常常搞不清楚this指向哪里,特别是学过java和c#的人,想当年俺也迷糊了好久,直到遇到蝴蝶书,主要是因为js和主流的面向对象语 ...

  9. JavaScript高级之函数的四种调用形式

    主要内容 分析函数的四种调用形式 弄清楚函数中this的意义 明确构造函对象的过程 学会使用上下文调用函数 了解函数的调用过程有助于深入学习与分析JavaScript代码. 本文是JavaScript ...

随机推荐

  1. Android__Context

    Context字面意思上下文,位于framework package的android.content.Context中, 其实该类为LONG型,类似Win32中的Handle句柄,很多方法需要通过Co ...

  2. 解决treeview未选中时,默认选中首个根节点的问题!

    private void treeView1_MouseUp(object sender, MouseEventArgs e) { TreeNode selectnode = this.treeVie ...

  3. python 出入任意多个参数

    def __init__(self, name, gender, birth, **kw): self.name = name self.gender = gender self.birth = bi ...

  4. BZOJ4295 : [PA2015]Hazard

    第i轮,a[i%n]+=b[i%m]. 枚举i,计算它变为0的次数,假设为t,那么有t=i+kn. 对于所有的i和k,(i+kn)%m形成了若干个总长度为m的环. 对于每个a[i],先在环中求出一轮最 ...

  5. 在桌面chrome中调试android设备中的web页面

    准备工作 1, 桌面版chrome 2, Android设备(安装有chrome浏览器) 3, Android-sdk Android-sdk安装及设置 SKD安装 从http://developer ...

  6. 使用CSS修改HTML5 input placeholder颜色

    HTML <input type="text" placeholder="Value" /> 有三种实现方式:伪元素(pseudo-elements ...

  7. PNG无损压缩工具Optipng【备忘】

    Optipng 是专门的 PNG 图像优化工具. 支持WINODWS.LINUX 地址:http://optipng.sourceforge.net/ 另:jpegoptim 优化 jpeg 图片 地 ...

  8. c++ stack 的使用

    (1) stack::empty bool empty ( ) const; 判断是否为空. return Value : true if the container size is 0, false ...

  9. Shell 之数组 [转]

    本文也即<Learning the bash Shell>3rd Edition的第六章Command-Line Options and Typed varilables之读书笔记之三,但 ...

  10. LeetCode-Repeated DNA Sequences (位图算法减少内存)

    Repeated DNA Sequences All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, ...