函数调用的四种方式 和 相关的 --- this指向
- this:表示被调用函数的上下文对象。
- arguments:表示函数调用过程中传递的所有参数。
- 这两个参数都是隐式的函数参数。会静默传递给函数,并且和函数体内显式声明的参数一样可正常访问。
- arguments有length属性,可以通过下标方式访问每个元素,但是它不是数组,是类数组。
函数调用的四种方式:区别主要在于this值得不同。 (对于作为方法调用而言,this为方法所在的对象// 对于顶级函数this 则为window或undefined// 对于构造函数而言this为新创建的实例)
- 作为一个函数(function)---test(),直接被调用。
function test(){
//函数体 -------函数定义作为函数被调用
}
test(); var test=function(){ };
test(); --------------函数表达式作为函数调用当以上面的方式调用,函数的上下文(this)有两种可能性:在非严格模式下,会是全局上下文(window对象);在严格模式下,是undefined。
function test(){
console.log(this); //window
}
test();
- 作为一个方法(method)---ml.test(),关联在一个对象上。
var obj1={
getMythis:test
};
var obj2={
getMythis:test
};
function test() {
console.log(this);
}
obj1.getMythis(); //返回上下文 对象obj1
obj2.getMythis(); //返回上下文 对象obj2通过this在任何方法中的引用该方法的宿主对象。调用同样的方法 但由于对象不同 返回的上下文也不同。
- 作为一个构造函数---new test(),实例化一个新对象。
通过构造函数的方式调用时,需要在函数调用之前加上关键字new。上例中函数test 的构造函数调用方式为:
var obj=new test();
通过new 关键字调用时会创建一个空的对象实例,并将其作为函数上下文(this参数)传递给函数。在构造函数中创建的属性和方法会在实例化后赋值给该对象。
调用构造函数时会发生如下操作:
- 创建一个新的空对象。
- 该对象作为this参数传递给构造函数,从而构成构造函数的函数上下文。
- 新构造的对象作为new运算符的返回值。
构造函数的目的:创建一个新对象,并进行初始化设置,然后将其作为构造的返回值。将返回结果存储在变量中,后续通过这些变量引用新创建的对象。
即:初始化新创建的对象。
var puppet={
rule:false
};
function Emperor(){
this.rules=true;
return puppet;
}
var emperor=new Emperor();
console.log(emperor===puppet); //true
打印结果 emperor为对象,包含属性rules,而不是Emperor函数调用后的返回值。
总结:
- 如果构造函数返回一个对象,则该对象将作为整个表达式的值返回,而传入构造函数的this将会被废弃。
- 但是,如果构造函数返回是非对象类型,则忽略返回值,返回新创建的对象。
- 通过函数的apply和call方法 ---sk.call(test) / sk.apply(test); 用法区别是:如何传参。
function Button(){
this.clicked=false;
this.click=function(){
this.clicked=true;
console.log(button.id);
}
}
var button=new Button();
var elem=document.getElementById("test");
elem.addEventListener("click",button.click); //undefined
原因: click函数的上下文并非执行button对象。上下文为按钮即:button元素,并非button对象。
更正:
1 function Button(){
2 this.clicked=false;
3 this.click=function(){
4 this.clicked=true;
5 console.log(button.id);
6 }
7 }
8 var button=new Button();
9 var elem=document.getElementById("test");
10 elem.addEventListener("click",button.click.bind(button));
//test
call 和apply 实际使用方法:
function Sum(){
var result=0;
for(var i=0;i<arguments.length;i++){
result+=arguments[i];
}
return this.result=result;
}
var test1={};
var test2={};
Sum.apply(test1,[1,2,3,4]);
Sum.call(test2,5,6,7,8);
console.log(test1.result); //
console.log(test2.result); //
其中Sum作为test1和test2对象的方法被调用,且函数上下文指向这些对象。实质为Sum函数的正常调用,只不过函数上下文为括号内传入的对象,手动设置函数上下文。
- 解决函数上下文的另外两种选择:箭头函数和bind方法。
箭头函数的this不会隐式传入,从定义时的函数继承上下文。如下例子所示:
var button= {
clicked: false,
click:()=>{
this.clicked = true;
console.log(button.clicked);
}
}
8 button.click(); //false
9 console.log(window.clicked); //true
因为click箭头函数是作为对象字面量的属性定义的,对象字面量是在全局代码中定义的,因此,箭头函数内部this与全局对象的this值相同。
- bind方法:创建并返回一个新函数,并绑定在传入的特定的对象上。函数体与原函数一致。
bind,apply,call异同:
共同点:都是改变this对象的指向问题。
区别:
1、bind返回值是新的函数,必须调用才能执行,后两者均为立即执行。
2、apply和call的传参方式不同,apply为传入数组,而call为一个个传入。bind和call传参类型相同。
函数调用的四种方式 和 相关的 --- this指向的更多相关文章
- python函数调用的四种方式 --基础重点
第一种:参数按顺序从第一个参数往后排#标准调用 # -*- coding: UTF-8 -*- def normal_invoke(x, y): print "--normal_invoke ...
- C#批量插入数据到Sqlserver中的四种方式
我的新书ASP.NET MVC企业级实战预计明年2月份出版,感谢大家关注! 本篇,我将来讲解一下在Sqlserver中批量插入数据. 先创建一个用来测试的数据库和表,为了让插入数据更快,表中主键采用的 ...
- 【Java EE 学习 80 下】【调用WebService服务的四种方式】【WebService中的注解】
不考虑第三方框架,如果只使用JDK提供的API,那么可以使用三种方式调用WebService服务:另外还可以使用Ajax调用WebService服务. 预备工作:开启WebService服务,使用jd ...
- C#_批量插入数据到Sqlserver中的四种方式
先创建一个用来测试的数据库和表,为了让插入数据更快,表中主键采用的是GUID,表中没有创建任何索引.GUID必然是比自增长要快的,因为你生成一个GUID算法所花的时间肯定比你从数据表中重新查询上一条记 ...
- iOS 登陆的实现四种方式
iOS 登陆的实现四种方式 一. 网页加载: http://www.cnblogs.com/tekkaman/archive/2013/02/21/2920218.ht ml [iOS登陆的实现] A ...
- 实现web数据同步的四种方式
http://www.admin10000.com/document/6067.html 实现web数据同步的四种方式 1.nfs实现web数据共享 2.rsync +inotify实现web数据同步 ...
- JAVA解析XML的四种方式
java解析xml文件四种方式 1.介绍 1)DOM(JAXP Crimson解析器) DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准.DOM是以层次结构组织的节点或信息片断的集合.这 ...
- Action中取得request,session的四种方式
Action中取得request,session的四种方式 在Struts2中,从Action中取得request,session的对象进行应用是开发中的必需步骤,那么如何从Action中取得这些对象 ...
- 关于this绑定的四种方式
一.前言 我们每天都在书写着有关于this的javascript代码,似懂非懂地在用着.前阵子在看了<你不知道的JavaScript上卷>之后,也算是被扫盲了一边关于this绑定的四种方式 ...
随机推荐
- elasticsearch 测试
https://www.yiibai.com/elasticsearch/elasticsearch-getting-start.html # curl -XPUT "http://loca ...
- 求前n项的斐波那契数列、求两个数的最小公倍数、求两个数的最大公约数
class Fib(object): def __call__(self,n): a=[0,1] for i in range(n-2): an ...
- RepeatMasker
1.简介 RepeatMasker是一款基于Library-based,通过相似性比对来识别重复序列,可以屏蔽序列中转座子重复序列和低复杂度序列(默认将其替换成N).提供有在线服务.RepeatMas ...
- CGLIB代理基础
本文意在讲解CGLIB的基础使用及基本原理. 一.CGLIB的基本原理: 依赖ASM字节码工具,通过动态生成实现接口或继承类的类字节码,实现动态代理. 针对接口,生成实现接口的类,即implement ...
- 解题(JuZhengCalculate-矩阵乘法计算量)
题目描述 矩阵乘法的运算量与矩阵乘法的顺序强相关. 例如: A是一个50×10的矩阵,B是10×20的矩阵,C是20×5的矩阵 计算A*B*C有两种顺序:((AB)C)或者(A(BC)),前者需要计算 ...
- Mysql 用户 创建与删除(基础1)
Mysql是最流行的关系型数据库管理系统之一,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一种关联数据库管理系统,关联数据库将数据保存在不同的表中,而不是将所有数据放在一个 ...
- poj2635(千进制取模+同余模定理)
题目链接:https://www.cnblogs.com/kuangbin/archive/2012/04/01/2429463.html 题意:给出大数s (s<=10100) ,L (< ...
- 最短路+叉积 poj1556
题目链接:The Doors - POJ 1556 - Virtual Judge https://vjudge.net/problem/POJ-1556 题意是叫我们计算从(0,5)到(10,5) ...
- JMeter监控内存及CPU ——plugin插件监控被测系统资源方法
jmeter中也可以监控服务器的CPU和内存使用情况,但是需要安装一些插件还需要在被监测服务器上开启服务. 1.需要的插件准备 JMeterPlugins-Standard-1.3.1.zip 下载 ...
- 微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由
前言: 对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的.哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多. 这里就以另外一种方式来详细的介绍小程序的页面栈及路 ...