JavaScript之this解密
来源:互联网 发布:重庆数据恢复发 编辑:程序博客网 时间:2024/05/16 18:31
JS中的this一直是个比较头疼的问题,这里我总结了一下this的四种场景
一 this的四种调用模式:
函数除了声明时定义的形参外,还接受两个附加参数:this和arguments(实参对象)
thius的值取决于调用的模式在js中一共有四种调用模式:方法调用,函数调用,构造器调用和通过call或apply间接调用模式
1.1方法调用
当函数被保存为对象的一个方法是,我们称它为方法,通过。点表达式或者[]表达式调用。
这时this绑定到该对象上。
var myObject = {
value:0,
inctement: function (inc) {
this.value += typeof inc === 'number' ? inc : 1
}
}
myObject.increment(1) .......//1
myObject.increment(2) .......//2
1.2 函数调用
当函数并非一个对象的属性时,this绑定到全局对象(非严格模式下)或者undefined(严格模式下),这时语言设计的错误。
BUT我们有一个容易的解决方案:如果你想要访问这个外部函数的this,需要将this的值保存在一个变量里面,这个变量和内部函数都在同一个作用域里。
myObject.double = function() {
var self = this;
var helper = function () {
that.value = add(that.value,that.value)
}
helper() //这里是以函数的形式调用helper
}
myObject.double()
1.3一个函数,它创建的目的就是希望结合new来调用,那么就可以称它为构造器函数。
如果一个函数前面加上new,那么背地里将会创建一个连接到该函数的prototype成员的新对象,同时this会绑定到那个新对象上面。
//创建一个构造器函数
var Quo = function (string) { this.status = string}//添加公用方法Quo.prototype.getStatus = function () { return this.status}//创建一个Quo实例var myQuo = new Quo('4543') .........//4543
1.4 call和apply都可以显式的置顶调用所需的this值,换言之:任何函数都可以作为任何对象的方法来调用,及时这个函数不是那个对象的方法。
call()方法使用它自有的参数列表作为函数的参数,而apply()则要求一数组的形式传入参数。
比如找出数组中的最大值
var arr = [1,23,4,54,6,23]Math.max.apply(Math,arr) Math.max.call(Math,...arr)
拿一个通俗易懂的例子:
var a = function{ 我能下蛋}var b = 公鸡 a.call(b) ......//公鸡可以下蛋啦 这里的this就是指的公鸡了。
讲到call,和apply就要说一下bind()了,EMCAScript5新增的bind方法,主要的作用就是将函数绑定到某个对象,看一下例子,当在函数f()上调用bind()方法并传入一个对象o作为参考,这个方法将返回
一个新的函数,当(以第二种函数调用的方式)调用新的函数时,将会把原始的函数f()作为0的方法来调用。传入新参数的任何实参,都会传入到原始函数中。
function f(y) { return this.x +y}var 0 = {x:1}var g = f.bind(o) .......//通过调用g(x)来调用o.f(x)g(2) ......//3
这里用apply()方法简单实现模拟bind()
function bind(f,o) { if (f.bind) return f.bind() else return function() { return f.apply(o,arguments) //return f.call(o,...arguments)}}
bind()方法不仅仅是吧函数绑定到一个对象上,还附带其他应用,除了第一个实参之外,传入bind()的实参也会绑定到this。(函数式变成技术,有时也成为"柯里化")
eg1:
var sum = function() {return x + y}var succ = sum.bind(null,1)succ(2) ...........// 3 x绑定到1,并传入2作为实参y
eg2:
var sum = function() {return this.x + y + z}var g = sum.bind({x:1},2)g(3) ........... 6 this.x绑定到1,y绑定到2,z绑定到3
当然有一些特性call和apply是模拟不了的比如bind方法返回的函数是不包含prototype的(普通函数固有的prototype是不能删除的)
阅读全文
0 0
- JavaScript之this解密
- 解密 JavaScript 中的 this
- JavaScript之this关键字
- JavaScript之this
- JavaScript 之 this 详解
- JavaScript加强之this
- javascript之this详解
- JavaScript之this释疑
- javascript之this关键字
- javascript之this指针
- 深入浅出JavaScript之this
- javascript学习之this
- JavaScript之初探this
- JavaScript之学习this
- JavaScript之this
- JavaScript之this对象
- javascript之this
- 解读JavaScript之this
- nginx接受post数据,并在日志里记录数据
- lib 和 dll 的区别、生成以及使用详解
- 盒子阴影-box-shadow
- 万物生长 项目jar包越少越好,不然会导致eclipse进入断点延迟高,很慢. Spring+quartz 实现定时任务job集群配置
- 为django配置404和502错误页面
- JavaScript之this解密
- ERROR JDBCExceptionReporter:234
- 《算法概论》课后习题8.8 证明4SAT是NP完全的
- 使用gdb调试多进程多线程
- 5分钟搞定android混淆
- 理解ThreadLocal(转)
- 21. Merge Two Sorted Lists
- Java web 错误集
- 网页背景图片固定,不随网页滚动
原创粉丝点击
热门IT博客
热门问题
老师的惩罚
人脸识别
我在镇武司摸鱼那些年
重生之率土为王
我在大康的咸鱼生活
盘龙之生命进化
天生仙种
凡人之先天五行
春回大明朝
姑娘不必设防,我是瞎子
久坐族臀部太大怎么办
天生全身皮肤黑怎么办
运动量过大腿疼怎么办
运动坚持不下来怎么办
小腿肌肉太发达怎么办
中学生头发白了怎么办
初中生有白头发怎么办
青少年头发不多怎么办
高中生有白头发怎么办
尿毒症患者磷高怎么办
京东买手机碎屏怎么办
网上买电脑售后怎么办
屏幕触屏不灵怎么办
苹果sim卡故障怎么办
vivox7无限重启怎么办
亚马逊买到假货怎么办
车辆忘了年检怎么办
忘了监控器密码怎么办
手机油漆掉了怎么办
苹果7掉漆怎么办
苹果6s氧化怎么办
苹果7闪屏开不了怎么办
蘑菇街发货慢怎么办
去省外没流量怎么办
移动卡怎么办流量套餐
oppo手机上网慢怎么办
移动流量网速慢怎么办
狗狗全身皮肤病怎么办
狗狗脱毛严重怎么办
犬瘟后遗症抽搐怎么办
地球帝国缺木材怎么办
我的世界 迷路怎么办
开关按不下去怎么办
台灯按钮坏了怎么办
电路板开关坏了怎么办
手机开关键失灵怎么办
路桥一级资质怎么办
劳务资质停办后怎么办
成都入户联系函怎么办
海岛大亨5总统府怎么办
dnftp任务打不过怎么办