html图片向右上方飘忽,关于javascript中this 飘忽不定的指向的问题
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 飘忽不定的指向的问题相关推荐
- 图片剪切工具Jcrop在JavaScript中使用
最近接手了一个JavaScript,html,css开发的项目,需要做头像上传的功能,需要用户在页面截取图片.找了相关资料后决定用Jcrop.在使用过程中,发先网上的例子没法直接拿过来用,然后官方文档 ...
- JavaScript中函数上下文this指向问题#面试常见读代码
this 总是指向执行时的当前对象.JavaScript 的 this 总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境.也就是说 this 的绑定和 ...
- 一篇文章把你带入到JavaScript中的闭包与高级函数
在JavaScript中,函数是一等公民.JavaScript是一门面向对象的编程语言,但是同时也有很多函数式编程的特性,如Lambda表达式,闭包,高阶函数等,函数式编程时一种编程范式. funct ...
- java script的图片隐藏,java和javascript中过滤掉img形式的字符串不显示图片的方法...
本文实例讲述了java和javascript中过滤掉img形式的字符串不显示图片的方法.分享给大家供大家参考.具体实现方法如下: 1. javascript过滤掉和形式的字符串 复制代码代码如下: 过 ...
- 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...
- JavaScript中的图片处理与合成(一)
JavaScript中的图片处理与合成(一) 引言: 图片处理现在已经成为了我们生活中的刚需,想必大家也经常有这方面的需求.实际前端业务中,也经常会有很多的项目需要用到图片加工和处理.由于过去一段时间 ...
- 转《JavaScript中的图片处理与合成》
引言: 本系列现在构思成以下4个部分: 基础类型图片处理技术之缩放.裁剪与旋转(传送门): 基础类型图片处理技术之图片合成(传送门): 基础类型图片处理技术之文字合成(传送门): 算法类型图片处理技术 ...
- JavaScript中的图片处理与合成(四)
引言: 本系列现在构思成以下4个部分: 基础类型图片处理技术之缩放.裁剪与旋转(传送门): 基础类型图片处理技术之图片合成(传送门): 基础类型图片处理技术之文字合成(传送门): 算法类型图片处理技术 ...
- JavaScript中的图片处理与合成(四) 1
引言: 本系列现在构思成以下4个部分: 基础类型图片处理技术之缩放.裁剪与旋转(传送门): 基础类型图片处理技术之图片合成(传送门): 基础类型图片处理技术之文字合成(传送门): 算法类型图片处理技术 ...
- php后台数据显示到前端,php,前端_怎么在javascript中得到后台数据?,php,前端,javascript,highcharts - phpStudy...
怎么在javascript中得到后台数据? 最近在研究在网页中嵌入hightchart的表格 在嵌入时发现需要在javascript中得到后台的一组数据 代码如下 require_once('incl ...
最新文章
- com/alipay/config/AlipayConfig.java:[1,1] 非法字符: '\ufeff'
- was升级jdk版本_WebSphere 8.5 升级jdk版本
- P1450 [HAOI2008]硬币购物
- 浏览器打开PDF调整亮度和颜色的小技巧
- 基于jedis的Redis工具类
- 【学习笔记】【C语言】进制
- 高级Linux Kernel Inline Hook技术分析与实现
- 安装mysql的zip包
- 统计github本地仓库的代码行数
- 城市统计年鉴数据查询
- Qhsusb Dload驱动
- final、finalize、finally异同,以及final关键字如何使用
- chromium官方文档
- android 开机动画 卡顿,开机动画没按帧率播放 有卡顿
- android youtube webview,android – 如何在WebView中全屏显示youtube视频
- 且初土豆泥、everbab棉花糖粉扑、好望水气泡饮、王小卤虎皮凤爪、PWU留香珠…月销千万的黑马爆品如何玩转新消费营销?
- 231个web前端的javascript特效分享(仅供本人学习,非教程类型)
- 俞军产品方法论读书心得笔记
- 运放放大倍数计算公式_低噪声前置高增益放大器设计
- 第七课:每年白捡几百块,你要不要