函数的四种调用模式

函数的四种调用模式
1、函数模式
特征
就是一个简单的函数调用,函数名前面没有任何的引导内容
this含义
this在函数模式中表示全局对象,在浏览器中是windjow对象
2、方法模式
特征
方法一定是依附与一个对象,将函数赋值给对象的一个属性,那么就成为了方法
this含义
this在方法模式调用中表示所依附的这个对象
3、构造器调用模式
与方法模式的this的区别
由于构造函数知识给this添加成员,没有做其他事情,而方法也可以完成这个操作,就this而言,构造函数与方法没有本质区别
特征
使用new关键字,来引导构造函数
this的区别
构造函数中的this与方法中一样,表示对象,当是构造函数中的对象是刚刚创建出来的对象
return关键字
关于构造函数中 return 关键字的补充说明
构造函数中不需要return,就会默认的 return this;
如果手动的添加return 后面不写值 , 就相当于return this;
如果手动的添加return基本类型,无效,还是保留原来的返回this 即 return this;
如果手动添加 return null 或 return undefined ; 无效
如果手动添加 return 对象类型,那么原来创建的this 就会被丢掉,返回的是return后面的对象
创建对象的模式
1、工厂方法
// 工厂就是用来生产的, 因此如果函数创建对象并返回, 就称该函数为工厂函数
function createPerson( name, age, gender ) {
var o = {};
o.name = name;
o.age = age;
o.gender = gender;
return o;
}
// document.createElement()
2、构造方法
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
}

var p = new Person("zhangsan", 19, "男");
3、寄生式创建对象
function Person(name, age, gender){
var o = {};
o.name = name;
o.age = age;
o.gender = gender;
return o;
}

var p = new Person("Jack", 18, "male");
4、混合式创建
混合式继承就是将所有的属性放在构造方法里面,然后将所有的方法放在原型里面,使用构造方法和原型配合起来创建对象
4、上下文调用模式
概念
上下文调用的含义
也就是自定义、设置 this的含义
上下文的概念
上下文Context,就是函数调用的所处环境
产生的条件
在其他三种调用模式中,函数/方法在调用的时候,this的值都是指定好了的,我们没有办法自己进行设置,如果尝试去给this赋值,会报错。
上下文调用的语法
1、apply
函数名.apply(对象,[参数]);
apply只能有两个参数,第一个参数是函数内部this替换的对象,第二个是该函数名的参数 --> 以伪数组或数组的形式传递
2、call
函数名.call(对象,参数,参数,参数);
两种方式的功能一模一样,只是在传递参数的时候有差异
功能描述
1、语法中的函数名表示的就是函数本身,使用函数调用模式的时候,this默认是全局对象
2、语法中的函数名也可以是方法(如obj.method), 在使用方法模式的时候,this默认是指当前对象
3、在使用apply和call的时候,默认的this都会失效,this的值有apply和call的第一个参数的决定
补充说明
1、如果函数或方法中没有this的操作,那么无论什么调用其实都一样
2、如果是函数调用foo(), 那么有点像 foo.apply(window);
3、如果是方法调用 o.method(),那么有点像o.method.apply( o );
参数问题
call 和 apply 在没有后面的参数的情况下(函数无参数,方法无参数) 是完全一样的。
第一个参数的使用规则
1、如果掺入的是一个对象,那么就相当于设置该函数中的this 为参数
2、如果不传人入参数,或传入 null 、undefined 等, 那么相当于this默认为 window
3、如果传入的是基本类型,那么this就是基本类型对应的包装类型的引用
第二个参数的使用规则
在使用上下文调用的时候,原函数(方法)可能会带有参数,那么这个参数在上下文调用中使用第二个(第n个) 参数来表示。
apply方法
特性: apply可以展开伪数组
该方法只有两个参数,第一个参数与call相同,但是,该方法的第二个参数是伪数组,或者 将原函数可能带有的参数包装成数组进行传递
call方法
第一个参数与apply没有区别,当是该方法可以有多个参数 --- 原函数所能接受的参数的 个数
5、上下文调用的应用
上下文调用只能修改this,但是使用最多的地方是函数借用
1、将伪数组转换为数组
a) cancat方法
传统做法
var a = {};
a[ 0 ] = ‘a‘;
a[ 1 ] = ‘b‘;
a.length = 2;

// 使用数组自带的方法 concat
// 如果参数中有数组会把参数数组展开
// 语法: arr.concat( 1, 2, 3, [ 4, [ 5 ] ] );
// 特点:不修改原数组
var arr = [];
var newArr = arr.concat( a );
但是apply方法有一个特性,可以将数组或伪数组作为参数。(IE8不支持数组操作) foo.apply( obj , 伪数组 ) ;//IE8不支持
由于 a 是伪数组,只是长得像数组,所以上面的代码不能成功,不能使用cancat方法
利用apply方法 ,可以写出如下代码
//将伪数组 a 作为 apply 的第二个参数
var newArr = Array.prototype.cancat.apply( [] , a );
处理数组转换,实际上就是将元素一个一个的取出来构成一个新数组,凡是涉及到该操作的方法理论上都可以。
b) push 方法
举例说明
//用法:
arr.push( 1 ); //将这个元素加到数组中, 并返回所加元素的个数
arr.push( 1, 2, 3 ); //将这三个元素依次加到数组中, 返回所加个数

var a = { length: 0 }; // 伪数组
a[ a.length++ ] = ‘abc‘; // a[ 0 ] = ‘abc‘; a.length++;
a[ a.length++ ] = ‘def‘;

// 使用一个空数组, 将元素一个个放到数组中即可
var arr = [];
arr.push( a ); // 此时不会将元素展开, 而是将这个伪数组作为一个元素加到数组中
// 再次利用 apply 可以展开伪数组的特征
arr.push.apply( arr, a );
// 利用 apply 可以展开伪数组的特性, 这里就相当于 arr.push( a[0], a[1] )
2、求数组中的最大值
a) 、 在js中 Math对象中提供了很多数学函数 Math.max( 1,2,3)
b) 还是利用 apply 可以展开数组的特性
var arr = [ 12,23, 34, 45, 45,56, 67];
Math.max.apply( null , arr ) ;
3、借用构造函数继承
举例
function Person ( name, age, gender ) {
this.name = name;
this.age = age;
this.gender = gender;
}

// 需要提供一个 Student 的构造函数创建学生对象
// 学生也应该有 name, age, gender, 同时还需要有 course 课程
function Student ( name, age, gender, course ) {
Person.call( this, name, age, gender );
this.course = course;
}
1、函数模式
特征
就是一个简单的函数调用,函数名前面没有任何的引导内容
this含义
this在函数模式中表示全局对象,在浏览器中是windjow对象
2、方法模式
特征
方法一定是依附与一个对象,将函数赋值给对象的一个属性,那么就成为了方法
this含义
this在方法模式调用中表示所依附的这个对象
3、构造器调用模式
与方法模式的this的区别
由于构造函数知识给this添加成员,没有做其他事情,而方法也可以完成这个操作,就this而言,构造函数与方法没有本质区别
特征
使用new关键字,来引导构造函数
this的区别
构造函数中的this与方法中一样,表示对象,当是构造函数中的对象是刚刚创建出来的对象
return关键字
关于构造函数中 return 关键字的补充说明
构造函数中不需要return,就会默认的 return this;
如果手动的添加return 后面不写值 , 就相当于return this;
如果手动的添加return基本类型,无效,还是保留原来的返回this 即 return this;
如果手动添加 return null 或 return undefined ; 无效
如果手动添加 return 对象类型,那么原来创建的this 就会被丢掉,返回的是return后面的对象
创建对象的模式
1、工厂方法
// 工厂就是用来生产的, 因此如果函数创建对象并返回, 就称该函数为工厂函数
function createPerson( name, age, gender ) {
var o = {};
o.name = name;
o.age = age;
o.gender = gender;
return o;
}
// document.createElement()
2、构造方法
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
}

var p = new Person("zhangsan", 19, "男");
3、寄生式创建对象
function Person(name, age, gender){
var o = {};
o.name = name;
o.age = age;
o.gender = gender;
return o;
}

var p = new Person("Jack", 18, "male");
4、混合式创建
混合式继承就是将所有的属性放在构造方法里面,然后将所有的方法放在原型里面,使用构造方法和原型配合起来创建对象
4、上下文调用模式
概念
上下文调用的含义
也就是自定义、设置 this的含义
上下文的概念
上下文Context,就是函数调用的所处环境
产生的条件
在其他三种调用模式中,函数/方法在调用的时候,this的值都是指定好了的,我们没有办法自己进行设置,如果尝试去给this赋值,会报错。
上下文调用的语法
1、apply
函数名.apply(对象,[参数]);
apply只能有两个参数,第一个参数是函数内部this替换的对象,第二个是该函数名的参数 --> 以伪数组或数组的形式传递
2、call
函数名.call(对象,参数,参数,参数);
两种方式的功能一模一样,只是在传递参数的时候有差异
功能描述
1、语法中的函数名表示的就是函数本身,使用函数调用模式的时候,this默认是全局对象
2、语法中的函数名也可以是方法(如obj.method), 在使用方法模式的时候,this默认是指当前对象
3、在使用apply和call的时候,默认的this都会失效,this的值有apply和call的第一个参数的决定
补充说明
1、如果函数或方法中没有this的操作,那么无论什么调用其实都一样
2、如果是函数调用foo(), 那么有点像 foo.apply(window);
3、如果是方法调用 o.method(),那么有点像o.method.apply( o );
参数问题
call 和 apply 在没有后面的参数的情况下(函数无参数,方法无参数) 是完全一样的。
第一个参数的使用规则
1、如果掺入的是一个对象,那么就相当于设置该函数中的this 为参数
2、如果不传人入参数,或传入 null 、undefined 等, 那么相当于this默认为 window
3、如果传入的是基本类型,那么this就是基本类型对应的包装类型的引用
第二个参数的使用规则
在使用上下文调用的时候,原函数(方法)可能会带有参数,那么这个参数在上下文调用中使用第二个(第n个) 参数来表示。
apply方法
特性: apply可以展开伪数组
该方法只有两个参数,第一个参数与call相同,但是,该方法的第二个参数是伪数组,或者 将原函数可能带有的参数包装成数组进行传递
call方法
第一个参数与apply没有区别,当是该方法可以有多个参数 --- 原函数所能接受的参数的 个数
5、上下文调用的应用
上下文调用只能修改this,但是使用最多的地方是函数借用
1、将伪数组转换为数组
a) cancat方法
传统做法
var a = {};
a[ 0 ] = ‘a‘;
a[ 1 ] = ‘b‘;
a.length = 2;

// 使用数组自带的方法 concat
// 如果参数中有数组会把参数数组展开
// 语法: arr.concat( 1, 2, 3, [ 4, [ 5 ] ] );
// 特点:不修改原数组
var arr = [];
var newArr = arr.concat( a );
但是apply方法有一个特性,可以将数组或伪数组作为参数。(IE8不支持数组操作) foo.apply( obj , 伪数组 ) ;//IE8不支持
由于 a 是伪数组,只是长得像数组,所以上面的代码不能成功,不能使用cancat方法
利用apply方法 ,可以写出如下代码
//将伪数组 a 作为 apply 的第二个参数
var newArr = Array.prototype.cancat.apply( [] , a );
处理数组转换,实际上就是将元素一个一个的取出来构成一个新数组,凡是涉及到该操作的方法理论上都可以。
b) push 方法
举例说明
//用法:
arr.push( 1 ); //将这个元素加到数组中, 并返回所加元素的个数
arr.push( 1, 2, 3 ); //将这三个元素依次加到数组中, 返回所加个数

var a = { length: 0 }; // 伪数组
a[ a.length++ ] = ‘abc‘; // a[ 0 ] = ‘abc‘; a.length++;
a[ a.length++ ] = ‘def‘;

// 使用一个空数组, 将元素一个个放到数组中即可
var arr = [];
arr.push( a ); // 此时不会将元素展开, 而是将这个伪数组作为一个元素加到数组中
// 再次利用 apply 可以展开伪数组的特征
arr.push.apply( arr, a );
// 利用 apply 可以展开伪数组的特性, 这里就相当于 arr.push( a[0], a[1] )
2、求数组中的最大值
a) 、 在js中 Math对象中提供了很多数学函数 Math.max( 1,2,3)
b) 还是利用 apply 可以展开数组的特性
var arr = [ 12,23, 34, 45, 45,56, 67];
Math.max.apply( null , arr ) ;
3、借用构造函数继承
举例
function Person ( name, age, gender ) {
this.name = name;
this.age = age;
this.gender = gender;
}

// 需要提供一个 Student 的构造函数创建学生对象
// 学生也应该有 name, age, gender, 同时还需要有 course 课程
function Student ( name, age, gender, course ) {
Person.call( this, name, age, gender );
this.course = course;
}

时间: 2024-10-23 18:30:06

函数的四种调用模式的相关文章

函数的四种调用模式.上下文调用.call.apply

闭包:函数就是一个闭包,一个封闭的作用域; 返回函数,要返回多个函数就用一个对象封装一下, 立即执行函数+return 回调函数 JS动态创建的DOM,不会被搜索引擎抓取,对SEO不友好. /*window的name属性*/ function fn(){ console.log(this.name); } fn.call({name:"zhangsan"});//"zhangsan" console.log(); fn();//'' 打印空字符串,此时调用fn其中的

JavaScript中函数的四种调用模式

理解函数的四种调用方法,可以有效的帮助我们分析和理解JavaScript代码.但是经常有人分不清楚或者不理解这四种调用模式,在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而非像C#或其他描述性语言那样仅仅作为一个模块来使用.函数有四种调用模式,分别是:1.函数调用形式 2.方法调用形式 3.构造器调用形式 4.上下文调用形式(apply,call)这里所有的调用模式中,最主要的区别在于关键字 this 的意义.下面分别介绍这几种调用形式. 一.函数调用形式

javascript中函数的四种调用模式详解

介绍函数四种调用模式前,我们先来了解一下函数和方法的概念,其实函数和方法本质是一样,就是称呼不一样而已.函数:如果一个函数与任何对象关系,就称该函数为函数.方法:如果一个函数作为一个对象属性存在,我们就称之为方法.接下来就可以开始今天的主体. 1.函数调用模式. 就是通过函数来调用,规范写法为:function fn(){} fn(); 函数中this的指向->window.案例如下: var age = 38; var obj = { age: 18, getAge: function() {

聊聊:Javascript中函数的四种调用模式

在 js 中 无论是函数, 还是方法, 还是事件, 还是构造器, ... 其本质都是函数. 只是处在不同的位子而已. 四种模式有:函数模式,方法模式,构造器模式,上下文模式 1.函数模式 特征: 就是一个简单的函数调用. 函数名的前面没有任何引导内容,其中this表示全局对象,在浏览器中是window. 比如: function foo () {} var func = function () {}; ... foo(); func(); (function (){})(); 2.方法模式 特征

JavaScript (JS) 函数补充 (含arguments、eval()、四种调用模式)

1. 程序异常 ① try-catch语法    测试异常 try-catch语法代码如下: try { 异常代码;     try中可以承重异常代码, console.log("try")  出现异常代码后,正确代码不会执行 } catch (e) { console.log("e:"+e);  try中出现异常在e中展现出来 console.log("catch");  只有try中出现异常才执行这段代码 } finally { consol

函数的四种调用模型

函数的四种调用模式在 js 中 无论是函数, 还是方法, 还是事件, 还是构造器, ... 其本质都是函数. 只是处在不同的位子而已. 四种: 函数模式方法模式构造器模式上下文模式1. 函数模式 特征: 就是一个简单的函数调用. 函数名的前面没有任何引导内容. function foo () {} var func = function () {}; ... foo(); func(); (function (){})();this 的含义: 在 函数中 this 表示全局对象, 在浏览器中是

js中this的四种调用模式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

Javascript中函数的四种调用方式

一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属性:arguments和this. arguments主要是用来保存函数参数,arguments中的callee属性主要是用来指向拥有当前arguments的函数(理解Javascript参数中的arguments对象). 3.在ECMAScript5中规范了另一个函数属性:caller(Opera

函数的四张调用模式

在 js 中 无论是函数, 还是方法, 还是事件, 还是构造器, ... 其本质都是函数. 只是处在不同的位子而已. 四种: 函数模式 方法模式 构造器模式 上下文模式 函数模式 特征: 就是一个简单的函数调用. 函数名的前面没有任何引导内容. function foo () {} var func = function () {}; ... foo(); func(); (function (){})(); this 的含义: 在 函数中 this 表示全局对象, 在浏览器中是 window