Javascript中函数的四种调用方式
一、Javascript中函数的几个基本知识点:
1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数。
2.函数中有两个特殊的内部属性:arguments和this.
arguments主要是用来保存函数参数,arguments中的callee属性主要是用来指向拥有当前arguments的函数(理解Javascript参数中的arguments对象).
3.在ECMAScript5中规范了另一个函数属性:caller(Opera早期版本不支持,其他版本浏览器都支持),它的作用是保存调用当前函数的函数的引用.
实例:
function outer() {
inner();
}
function inner() {
console.log(inner.caller);
}
outer();
测试结果:

为了实现更松散的耦合,在inner()方法中同样可以利用arguments.callee.caller来访问,得到的结果和上面的结果一样.
4.在ECMAScript5中还定义了arguments.caller,它主要是用来区别函数中的caller属性。在非严格模式下,arguments.caller得到的值都是undefined;在严格模式下,下面的三种情况都会报错:
"use strict"
function outer() {
inner();
}
function inner() {
//console.log(inner.caller);//报错
//console.log(arguments.caller);//报错
//console.log(arguments.callee.caller);//报错
}
outer();
5.函数是个对象,因此它有属性和方法:每个函数都包括两个属性:length、prototype.通过函数名直接调用length,可以得到函数形参的个数;prototype是原型属性,每个函数都会有一个原型属性,更多关于原型属性的内容:理解javascript中的原型模式. 每个函数都包含两个非继承来的方法:apply()和call()(apply()和call()的区别).
二、四种调用函数的方式:函数调用模式、方法调用模式、构造器模式、apply\call模式.
1.直接调用函数的方式,this指向的全局对象window.
实例1:
函数声明
function add(a,b) {
return a+b;
}
console.log(add(1,2));
实例2:
函数表达式
var add=function (a,b) {
return a+b;
}
console.log(add(1,2));
2.函数作为对象的方法调用,this指向当前的对象.
实例1:
var o = {
prop: 21,
f:function() {
return this.prop;
}
};
console.log(o.f());
实例2:
var o = {
prop: 21,
};
function f() {
return this.prop;
}
o.f = f;
console.log(o.f());//21
3.通过new调用构造器的方式,this指向当前构造函数的原型.
实例1:
返回this对象给o
function MyClass() {
this.a = 21;
}
var o = new MyClass();
console.log(o.a);//21
实例2:
如果有return,则返回return的结果,如果没有就会返回this。
function MyClass() {
this.a = 21;
return {a:22};
}
var o = new MyClass();
console.log(o.a);//22
4.通过apply或call的方式,这两个的第一参数即this,当第一个参数为null,this指向window;当第一个参数为一个对象,this就指向当前这个对象。
Javascript中函数的四种调用方式的更多相关文章
- javascript中函数的四种调用模式详解
介绍函数四种调用模式前,我们先来了解一下函数和方法的概念,其实函数和方法本质是一样,就是称呼不一样而已.函数:如果一个函数与任何对象关系,就称该函数为函数.方法:如果一个函数作为一个对象属性存在,我们 ...
- JS高级. 06 缓存、分析解决递归斐波那契数列、jQuery缓存、沙箱、函数的四种调用方式、call和apply修改函数调用方法
缓存 cache 作用就是将一些常用的数据存储起来 提升性能 cdn //-----------------分析解决递归斐波那契数列<script> //定义一个缓存数组,存储已经计算出来 ...
- js函数的四种调用方式以及对应的this指向
一.函数调用,此时this是全局的也就是window 1 var c=function(){ 2 alert(this==window) 3 } 4 c()//true 二.方法调用 var myOb ...
- JavaScript高级之函数的四种调用形式
主要内容 分析函数的四种调用形式 弄清楚函数中this的意义 明确构造函对象的过程 学会使用上下文调用函数 了解函数的调用过程有助于深入学习与分析JavaScript代码. 本文是JavaScript ...
- javascript中this的四种用法
javascript中this的四种用法 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2015-05-11我要评论 在javascript当中每一个function都是一个对象,所 ...
- JS面向对象函数的四种调用模式
函数的四种调用模式 概念 在 js 中,无论是函数, 还是方法, 还是事件, 还是构造器,...这些东西的本质都是函数 函数, 方法, 事件, 构造器,...只是所处的位置不同 这四种模式分别是 函数 ...
- 同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式
1. 概念理解 在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式: 同步/异步主要针对C端: 同步: ...
- 函数的四种调用模式.上下文调用.call.apply
闭包:函数就是一个闭包,一个封闭的作用域; 返回函数,要返回多个函数就用一个对象封装一下, 立即执行函数+return 回调函数 JS动态创建的DOM,不会被搜索引 ...
- 【温故知新】——原生js中常用的四种循环方式
一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出“欢迎下次光临” 在网页中弹出框输入1 网页输出“查询中……” 在 ...
随机推荐
- 《你不知道的JavaScript》第二部分:this 详解
第1章 关于this this 是自动定义在所有函数的作用域中的关键字,用于引用合适的上下文对象. ☞ 为什么要使用 this ? this 提供了一种更优雅的方式来隐式"传递"一 ...
- Maven打包可执行Jar包方式
第一步:pom.xm中的build标签下加入maven插件配置,打包生成可执行jar包方式Maven中的打包方式更换为 <packaging>jar</packaging> b ...
- Flume NG之Interceptor简介
转载地址:http://www.cnblogs.com/lxf20061900/p/3658172.html 有的时候希望通过Flume将读取的文件再细分存储,比如讲source的数据按照业务类型分开 ...
- QMP ( qemu monitor protocol ) and Different ways of accessing it
The QEMU Monitor Protocol (QMP) is a JSON-based protocol which allows applications to communicate wi ...
- python 的 class
虽然python OOP 是可选的,但是尽可能使用OOP, 可以让你的代码更精简,容易理解. python 中大多数OOP故事, 都可简化为这个表达式: object.attribute 类的建立使用 ...
- sticky bit
• Sticky Bit这个Sticky Bit当前只针对目录有效,对文件没有效果.SBit对目录的作用是:“在具有SBit的目录下,用户若在该目录下具有w及x权限,则当用户在该目录下建立文件或目录时 ...
- textarea元素在加上runat="server"后运行报错解决
当出现这个报错的时候,在后台引用相应的命名空间,为 using System.Web.UI; using System.Web.UI.HtmlControls;using System.Web.UI. ...
- Set-常用API及详解
SetAPI: 类别 方法 增 add.addAll 删 remove.removeAll 长 size 遍 iterator 判 isEmpty hashCode 使用与集合大同小异,主要的区别就在 ...
- 使用isInEditMode解决可视化编辑器无法识别自定义控件的问题
如果在自定义控件的构造函数或者其他绘制相关地方使用系统依赖的代码, 会导致可视化编辑器无法报错并提示:Use View.isInEditMode() in your custom views to s ...
- SpringMVC 自定义参数绑定实现日期类型绑定
package cn.itcast.ssm.controller.converter; import java.text.ParseException; import java.text.Simple ...