关于javascript中this 指向的4种调用模式
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种调用模式的更多相关文章
- 从零开始学习前端JAVASCRIPT — JavaScript中this指向的四种情况
JavaScript中this的四种情况(非严格模式) 1.当this所在函数是事件处理函数时,this指向事件源.2.当this所在函数是构造函数时,this指向new出来的对象.3.this所在函 ...
- 【转】JavaScript中的this关键字使用的四种调用模式
http://blog.csdn.net/itpinpai/article/details/51004266 this关键字本意:这个.这里的意思.在JavaScript中是指每一个方法或函数都会有一 ...
- javascript中var let const三种变量声明方式
javascript中var let const三种变量声明方式 1.var ①var表示声明了一个变量,并且可以同时初始化该变量. ②使用var语句声明的变量的作用域是当前执行位置的上下文:一个函 ...
- javascript中函数的四种调用模式详解
介绍函数四种调用模式前,我们先来了解一下函数和方法的概念,其实函数和方法本质是一样,就是称呼不一样而已.函数:如果一个函数与任何对象关系,就称该函数为函数.方法:如果一个函数作为一个对象属性存在,我们 ...
- javascript中实现继承的几种方式
javascript中实现继承的几种方式 1.借用构造函数实现继承 function Parent1(){ this.name = "parent1" } function Chi ...
- js中this指向的三种情况
js中this指向的几种情况一.全局作用域或者普通函数自执行中this指向全局对象window,普通函数的自执行会进行预编译,然后预编译this的指向是window //全局作用域 console.l ...
- JavaScript中数组去重的几种方法
JavaScript中数组去重的几种方法 正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀.现在我总结了一些去重 ...
- js中this的四种调用模式
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- JavaScript高级之函数的四种调用形式
主要内容 分析函数的四种调用形式 弄清楚函数中this的意义 明确构造函对象的过程 学会使用上下文调用函数 了解函数的调用过程有助于深入学习与分析JavaScript代码. 本文是JavaScript ...
随机推荐
- 范数(norm)
[范数定义] 非负实值函数(非线性) 1)非负性: || a || >= 0 2)齐次性: || ka || = |k| ||a|| 3)三角不等式: || a + b || <= || ...
- 三 SVN权限设置&用户&组
创建组,添加用户之后进行权限的设置:
- HTML<a>标签作为锚链接
1. 什么是锚链接? <a></a>标签主要作为超链接和锚链接使用.超链接主要指不同html页面之间的跳转,而锚链接指的是同一页面之间的跳转. 锚链接的两种效果: 在当前页面中 ...
- node批量修改文件名称
let fs = require('fs');//引用文件系统模块 let PATH = `./app_zijietiaodong/`;//当前文件夹 let ext = { readFileList ...
- 【pwnable.tw】 alive_note
突然发现已经两个月没写过WP了,愧疚- -... 此题也算一道分数很高的题目,主要考察Shellcode的编写. 又是一道题目逻辑很简单的题. 首先提供了三个函数 查看,删除,添加 查看函数: 此函数 ...
- blog编辑技巧
blog里添加目录 添加版权声明 其他 更新日志: 20190719, 添加目录,增加章节:[添加版权声明] blog里添加目录 https://szosoft.blogspot.com/需要使用绝对 ...
- 清北学堂例题 LUOGU2519 【HAOI2011】PROBLEM A
题目描述 一次考试共有n个人参加,第i个人说:“有ai个人分数比我高,bi个人分数比我低.”问最少有几个人没有说真话(可能有相同的分数) 输入格式 第一行一个整数n,接下来n行每行两个整数,第i+1行 ...
- python手动实现深拷贝
深拷贝是将对象全拷贝,包括嵌套对象 def deepcopy(cls): if isinstance(cls, dict): dct = {} for k, v in cls.items(): dct ...
- 在 linux 中遇到 OSError: inotify watch limit reached 错误
检查系统当前限制,默认应该是 8192: cat /proc/sys/fs/inotify/max_user_watches 可根据需要调整系统限制,但是目前还不知道如何查看每个进程对 watch 的 ...
- 关于js中异步问题的解决方案
在js中有一个始终无法绕过的问题,如何优雅地解决异步问题.实际上,js在执行过程中,每遇到一个异步函数,都会将这个异步函数放入一个异步队列中,只有当同步线程执行结束之后,才会开始执行异步队列中的函数, ...