JavaScript函数调用
1. 调用一个函数将暂停当前函数的执行,传递控制权和参数给新函数。
2. 除了声明时定义的形参,每个函数都有两个附加的参数:this和arguments。
1. this在面向对象编程中很重要,它的值取决于调用的模式。
3. 在JS中一共有4种调用模式:方法调用模式、函数调用模式、构造器调用模式和apply调用模式。这些模式在如何初始化关键参数this上存在差异。
1. 方法调用:函数作为对象的一个属性时,就叫这个对象的方法,当这个方法被调用时,this的值就是该对象。
var obj = {
value : 0,
increment : function(inc) {
this.value += typeof inc === 'number' ? inc : 1;
}
}
obj.increment();
console.log(obj.value); // 1
obj.increment(2);
console.log(obj.value); // 3
this到到对象的绑定发生在调用的时候,通过this可以取得它们所属对象的上下文的方法称为公共方法。
2. 函数调用:函数不在对象内,不是对象的一个属性,就被当为函数来调用。当一个函数以这种方式调用时,this指向全局(window)。但这是JS设计上的一个错误:倘若语言设计正确,当内部函数被调用时,this应该仍绑定到外部函数的this变量。这个设计错误的后果是方法不能利用内部函数来帮助它工作,因为内部函数的this被绑定了错误的值,所以不能共享该方法对对象的访问权。幸运的是,有一个很容易的解决方案:如果该方法定义一个变量并将它赋值为this,那么内部函数就可以通过这个变量访问this,按照约定,将这个变量命名为that,这就是大名鼎鼎的var that = this;
var obj = {
value : 1,
double : function() {
var that = this; //此double函数内所有that指obj对象,留住this
var helper = function() {
that.value = that.value * 2;
};
helper();
}
}
obj.double();
console.log(obj.value); //
3. 构造器调用:JS是基于原型继承的语言,该语言是无类别(class)的,对象可以直接从其他对象继承属性。当今大多数语言都是基于类的语言,虽然原型继承有着强大的表现力,但它偏离了主流用法,并不被广泛理解。JavaScript为了能够兼容基于类语言的编写风格,提供了一套基于类似类语言的对象构建语法:如果在一个函数前面加上new关键字来进行调用,那么将创建一个隐藏链接到该函数的prototype原型对象的新实例对象,同时this将会被绑定到这个新实例对象上。注意,new前缀也会改变return语句的行为。var obj = new Base(); new操作符具体干了什么呢?其实很简单,就干了三个微小的工作:
1. var obj = {};//创建了一个空对象
2. obj.__proto__ = Base.prototype;//把这个空对象的__proto__指向构造函数Base()的prototype
3. Base.call(obj); //将Base函数对象的this指针指向obj,然后再调用Base函数
var F = function(string) {
this.status = string;
};
F.prototype.get = function() {
return this.status;
};
var f = new F("new object");
/*
1. 创建了一个空对象var f = {};
2. f对象的__proto__指向F的prototype
3. F中的this指向f对象,同时调用F()函数
*/
console.log(f.get()); //"new object"
4. apply调用:因为JS是一门函数式的面向对象编程语言,所以函数拥有方法。函数的apply方法可以构造一个参数数组,并用其去调用函数,也允许我们选择this的值。apply方法包括两个参数:第一个参数设置绑定给this的值;第二个参数是包含函数参数的数组。
var array = [5, 4];
var add = function(a, b) {
return a+b;
};
var sum = add.apply({}, array);//
/*
apply方法调用add()函数,并将数组array中的元素当成参数传给add()。
*/ var F = function(string) {
this.status = string;
};
F.prototype.get = function() {
return this.status;
};
var obj = {
status: 'OK'
};
var status = F.prototype.get.apply(obj); //''OK''
/*
调用F.prototype.get()方法,把这个方法中的this值绑定为obj
*/
JavaScript函数调用的更多相关文章
- JavaScript函数调用规则
1. [代码][JavaScript]代码 JavaScript函数调用规则一 (1)全局函数调用:function makeArray( arg1, arg2 ){ return [t ...
- javascript函数调用的各种方法!!
在JavaScript中一共有下面4种调用方式: (1) 基本函数调用 (2)方法调用 (3)构造器调用 (4)通过call()和apply()进行调用 1. 基本函数调用 普通函数调用模式,如: J ...
- Javascript函数调用的四种模式
一 前言 Javascript一共有四种调用模式:方法调用模式.函数调用模式.构造器调用模式以及apply调用模式.调用模式不同,对应的隐藏参数this值也会不同. 二 方法调用模式 函数作为对象的属 ...
- JavaScript 函数调用
JavaScript 函数有 4 种调用方式. 每种方式的不同方式在于 this 的初始化. this 关键字 一般而言,在Javascript中,this指向函数执行时的当前对象. 注意 this ...
- "大哥,割草机借我用一下,我修整一下草坪。" ---- 谈谈this与JavaScript函数调用的不解之缘
在写上一篇有关apply和call的博文时(闲聊JS中的apply和call),起初我还是担心大家理解起来比较困难,因为要理解apply调用方式的前提是,至少先理解在JavaScript中函数调用是什 ...
- JavaScript 函数调用和this指针
函数调用和this指针 1. 全局环境的this指针 浏览器全局环境下this指向window对象 console.log(this); //Window {postMessage: ƒ, blur: ...
- 7 JavaScript函数调用&this关键字&全局对象&函数调用&闭包
JavaScript函数有4种调用方式,每种方式的不同之处在于this的初始化 一般而言,在JavaScript中,this指向函数执行时的当前对象 如果函数不属于任何对象,那么默认为全局对象,即HT ...
- JavaScript函数调用模式
1.方法调用模式: var myObj = { value : 0; increment:function(inc){ this.value += typeof inc === 'number' ? ...
- JavaScript 函数调用的 this词法
函数调用时的this实际上是在函数被调用时发生绑定,它指向什么完全取决于函数在哪里被调用. 特例:当函数作为构造函数被调用时,即使用new 来构造一个新对象,会自动执行以下操作: [1]创建一个新对象 ...
随机推荐
- nodeValue和innerHTML的比较
<ul id="parent"> <li>1</li> <li>2</li> <li>3</li> ...
- [转]Creating Unit Tests for ASP.NET MVC Applications (C#)
本文转自:http://www.asp.net/mvc/tutorials/older-versions/unit-testing/creating-unit-tests-for-asp-net-mv ...
- JVM优化
1.堆大小设置 JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~2G:64 ...
- js内置对象处理-打印学生成绩单
效果图: 任务: 1.通过js的内置对象得到当前日期 var date=new Date(); var year=date.toString().slice(11,15); document.writ ...
- 用js实现选项卡切换效果
这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...
- JavaGUI实现点名系统
有一个名字数组,根据线程知识是框中的数据依次修改 package Week1008; import java.awt.Font; import java.awt.event.ActionEvent; ...
- Spring分布式事务实现(适用于spring-tx 2.5)
http://log-cd.iteye.com/blog/807607 分布式事务是指操作多个数据库之间的事务,spring的org.springframework.transaction.jta.J ...
- 用Java socket (TCP通信模型)实现一个简单的web 服务器
package cn.magicdu.think.socket; import java.io.OutputStream; import java.io.PrintWriter; import jav ...
- Mysql 创建联合索引注意事项
当一个表有多条索引可走时, Mysql 根据查询语句的成本来选择走哪条索引, 联合索引的话, 它往往计算的是第一个字段(最左边那个), 这样往往会走错索引. 如: 索引Index_1(Crea ...
- [python] 高效使用assert
Places to consider putting assertions: checking parameter types, classes, or values checking data st ...