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

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

),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 构构器函数的原理,参见这篇文章:

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);

原文:http://www.cnblogs.com/windyfancy/p/5167209.html

html图片向右上方飘忽,关于javascript中this 飘忽不定的指向的问题相关推荐

  1. 图片剪切工具Jcrop在JavaScript中使用

    最近接手了一个JavaScript,html,css开发的项目,需要做头像上传的功能,需要用户在页面截取图片.找了相关资料后决定用Jcrop.在使用过程中,发先网上的例子没法直接拿过来用,然后官方文档 ...

  2. JavaScript中函数上下文this指向问题#面试常见读代码

    this 总是指向执行时的当前对象.JavaScript 的 this 总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境.也就是说 this 的绑定和 ...

  3. 一篇文章把你带入到JavaScript中的闭包与高级函数

    在JavaScript中,函数是一等公民.JavaScript是一门面向对象的编程语言,但是同时也有很多函数式编程的特性,如Lambda表达式,闭包,高阶函数等,函数式编程时一种编程范式. funct ...

  4. java script的图片隐藏,java和javascript中过滤掉img形式的字符串不显示图片的方法...

    本文实例讲述了java和javascript中过滤掉img形式的字符串不显示图片的方法.分享给大家供大家参考.具体实现方法如下: 1. javascript过滤掉和形式的字符串 复制代码代码如下: 过 ...

  5. 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小

    查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...

  6. JavaScript中的图片处理与合成(一)

    JavaScript中的图片处理与合成(一) 引言: 图片处理现在已经成为了我们生活中的刚需,想必大家也经常有这方面的需求.实际前端业务中,也经常会有很多的项目需要用到图片加工和处理.由于过去一段时间 ...

  7. 转《JavaScript中的图片处理与合成》

    引言: 本系列现在构思成以下4个部分: 基础类型图片处理技术之缩放.裁剪与旋转(传送门): 基础类型图片处理技术之图片合成(传送门): 基础类型图片处理技术之文字合成(传送门): 算法类型图片处理技术 ...

  8. JavaScript中的图片处理与合成(四)

    引言: 本系列现在构思成以下4个部分: 基础类型图片处理技术之缩放.裁剪与旋转(传送门): 基础类型图片处理技术之图片合成(传送门): 基础类型图片处理技术之文字合成(传送门): 算法类型图片处理技术 ...

  9. JavaScript中的图片处理与合成(四) 1

    引言: 本系列现在构思成以下4个部分: 基础类型图片处理技术之缩放.裁剪与旋转(传送门): 基础类型图片处理技术之图片合成(传送门): 基础类型图片处理技术之文字合成(传送门): 算法类型图片处理技术 ...

  10. php后台数据显示到前端,php,前端_怎么在javascript中得到后台数据?,php,前端,javascript,highcharts - phpStudy...

    怎么在javascript中得到后台数据? 最近在研究在网页中嵌入hightchart的表格 在嵌入时发现需要在javascript中得到后台的一组数据 代码如下 require_once('incl ...

最新文章

  1. com/alipay/config/AlipayConfig.java:[1,1] 非法字符: '\ufeff'
  2. was升级jdk版本_WebSphere 8.5 升级jdk版本
  3. P1450 [HAOI2008]硬币购物
  4. 浏览器打开PDF调整亮度和颜色的小技巧
  5. 基于jedis的Redis工具类
  6. 【学习笔记】【C语言】进制
  7. 高级Linux Kernel Inline Hook技术分析与实现
  8. 安装mysql的zip包
  9. 统计github本地仓库的代码行数
  10. 城市统计年鉴数据查询
  11. Qhsusb Dload驱动
  12. final、finalize、finally异同,以及final关键字如何使用
  13. chromium官方文档
  14. android 开机动画 卡顿,开机动画没按帧率播放 有卡顿
  15. android youtube webview,android – 如何在WebView中全屏显示youtube视频
  16. 且初土豆泥、everbab棉花糖粉扑、好望水气泡饮、王小卤虎皮凤爪、PWU留香珠…月销千万的黑马爆品如何玩转新消费营销?
  17. 231个web前端的javascript特效分享(仅供本人学习,非教程类型)
  18. 俞军产品方法论读书心得笔记
  19. 运放放大倍数计算公式_低噪声前置高增益放大器设计
  20. 第七课:每年白捡几百块,你要不要

热门文章

  1. 【CVE-2016-10009】OpenSSH 7.4 - agent Protocol Arbitrary Library Loading
  2. Linux下如何查看高CPU占用率线程 专题
  3. 159.majority element
  4. 最常见30种NLP任务练手项目汇总
  5. 13、细说装饰器与闭包
  6. ZR18提高5解题报告
  7. php连接池 php–cp
  8. bad interpreter: No such file or directory
  9. git 的sshkeys生成方法以及上传代码鱼git
  10. AtomicInteger的CAS算法浅析