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

关于new 构构器函数的原理,参见这篇文章:

http://www.cnblogs.com/windyfancy/p/5167266.html

),this并不指向当前对象,这是理解this的关键所在,this的指向取决于你是采用何种方式调用this所在的这个函数的,其实也只有四种调用模式,搞清楚了就以不变应万变。蝴蝶书(javascript语言精髓)里总结的最清楚,在javascript中一共有四种调用模式:方法调用模式,函数调用模式,构造器调用模式,apply/call调用模式。这些模式在如何初始化关键参数this上存在差异。

1   .方法调用模式(对象名.方法名(),或对象名[“方法名”]())

当一个函数被保存为对象的一个属性时,我们称它为一个方法。当一个方法被调用时,this被绑定到该对象。如果一个调用表达式包含一个属性存取表达式(即一个.点表达式或者[subscript]下标表达式),那么它被当做一个方法来调用

var myObject = {

value :0,

increment:function (inc){

this.value += typeof inc ==='number' ? inc:1;

}

};

myObject.increment();

document.writeln(myObject.value);  //1

myObject.increment(2);

document.writeln(myObject.value);  //3

方法可以使用this去访问对象,所以它能从对象中取得或修改该对象。this到对象的绑定发生在调用的时候。这个“超级”迟绑定( very late binding)使得函数可以对this高度复用。通过this可取得它们所属对象的上下文的方法称为公共方法。

2 .函数调用模式

当一个函数并非一个对象的属性是,那么它被当做一个函数来调用:var sum = add(3,4); //sum的值为7,当函数以此模式调用时,this被绑定到全局对象window上。这是语言设计上的一个错误,倘若语言设计正确,当内部函数被调用时,this应该仍然绑定到外部函数的this变量。这个设计错误错误的后果是方法不能利用内部函数来帮助它工作,因为内部函数的this被绑定了错误的值,所以不能共享该方法对对象的访问权。幸运的是,可以利用闭包特性保存this到一个自定义变量:如果该方法定义一个变量并给他赋值为this,那么内部函数就可以通过那个变量访问到this。

//给myObject增加一个double方法

myObject.double = function(){

var self = this; //解决方案

var doubleFn = function(){

self.value = self.value*2;

};

doubleFn ();//以函数的形式调用

};

//以方法的形式调用double

myObject.double();

document.writeln(myObject.getValue()); //6

3 . 构造器函数调用模式

使用new 方式调用一个函数,那么这个函数被称之为构造器函数,这个构造器函数会创建出来一个新生的对象,这个新生对象的constructor指向这个构造器函数。

Function myFun(){

this.color=”red”;

}

var obj=new myFun();

console.log(obj.color); //red;

关于new 构构器函数的原理,参见这篇文章:

http://www.cnblogs.com/windyfancy/p/5167266.html

4  .apply/call 调用方式

apply调用方式最为强大,可以指定this为任意对象,call的功能和apply一样,只是接收的参数有区别。

var user={

name:'windy',

say:'hello,world'

}

var obj={

test:function(){

alert(this.name+':'+this.say);

}

}

obj.test.apply(user);

关于javascript中this 指向的4种调用模式的更多相关文章

  1. 从零开始学习前端JAVASCRIPT — JavaScript中this指向的四种情况

    JavaScript中this的四种情况(非严格模式) 1.当this所在函数是事件处理函数时,this指向事件源.2.当this所在函数是构造函数时,this指向new出来的对象.3.this所在函 ...

  2. 【转】JavaScript中的this关键字使用的四种调用模式

    http://blog.csdn.net/itpinpai/article/details/51004266 this关键字本意:这个.这里的意思.在JavaScript中是指每一个方法或函数都会有一 ...

  3. javascript中var let const三种变量声明方式

    javascript中var let const三种变量声明方式 1.var  ①var表示声明了一个变量,并且可以同时初始化该变量. ②使用var语句声明的变量的作用域是当前执行位置的上下文:一个函 ...

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

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

  5. javascript中实现继承的几种方式

    javascript中实现继承的几种方式 1.借用构造函数实现继承 function Parent1(){ this.name = "parent1" } function Chi ...

  6. js中this指向的三种情况

    js中this指向的几种情况一.全局作用域或者普通函数自执行中this指向全局对象window,普通函数的自执行会进行预编译,然后预编译this的指向是window //全局作用域 console.l ...

  7. JavaScript中数组去重的几种方法

    JavaScript中数组去重的几种方法 正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀.现在我总结了一些去重 ...

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

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

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

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

随机推荐

  1. 通过注册码破解IntelliJ IDEA

    把激活码填入下面的地方即可.如果不知道在哪里,那么就选菜单栏里的help再选Register就会弹出下面的界面 激活码网址里面有 lookdiv.com 里面的钥匙就是lookdiv.com

  2. SciPy 教程

    章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...

  3. jmeter用Stepping Thread Group 递增并发数

    jmeter安装插件Stepping Thread Group 如图所示设置的时候,本以为是每2秒 按 1 2 3 4 递增的,总共请求应该是10个,可是运行后却请求了几十个. 这个是有关线程数是否就 ...

  4. Windows驱动开发-内核常用内存函数

    搞内存常用函数 C语言 内核 malloc ExAllocatePool memset RtlFillMemory memcpy RtlMoveMemory free ExFreePool

  5. windows目标进程注入dll

    在别的程序注入dll 步骤: ,获取目标进程ID,CreateToolhelp32Snapshot()函数; ,获取目标进程句柄,OpenProcess()函数; ,目标进程要一块内存,Virtual ...

  6. VMware Tools 组件、配置选项和安全要求

  7. Linux-Power-management

    1. 低级接口1.1 内核(swsusp)软件挂起1.1.1 睡眠状态的2个控制文件1.1.2 查看当前系统的睡眠控制文件内容1.1.3 状态表(表1)1.1.4 状态的使用1.2 uswsusp用户 ...

  8. Android框架模式

    参考大佬写的文章:https://www.jianshu.com/p/f17f5d981de7 1.MVC模式 Model:模型层,负责处理数据的加载或存储 View:视图层,负责界面数据的展示,与和 ...

  9. Java连载68-数组的拷贝、二维数组

    一.数组的拷贝 函数arraycopy(),参数为:源数组.源数组的开始下标.目标数组.目标数组的开始下标.拷贝长度 package com.bjpowernode.java_learning; ​ ...

  10. numpy.linspace使用详解

    numpy.linspace(start, stop, num=50, endpoint=True, retstep=False, dtype=None) 在指定的间隔内返回均匀间隔的数字. 返回nu ...