`

JavaScript四种调用模式

 
阅读更多
ref:《javascript语言精髓》第四章#函数#调用

方法调用模式:
当一个函数被保存为对象的一个属性时,我们称它为一个方法。当一个方法被调用时,this被绑定到该对象。
如果一个调用表达式包含一个属性存取表达式("."或"[]"),那么它被当作一个方法来调用。
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到对象的绑定发生在调用的时候。
通过this可取的它们所属对象的上下文的方法称为公共方法。

函数调用模式:
var sum = add(2,3) 

当函数以此模式调用时,this被绑定到全局对象。这是语言设计上的一个错误(书作者说的)。
当内部函数(在内部)被调用时,this应该仍然绑定到外部函数的this变量。
这个设计错误的后果是方法不能利用内部函数来帮助它工作。
因为内部函数的this被绑定了错误的值,所以不能共享该方法对对象的访问权。
解决方案:
如果该方法定义一个变量并给他赋值为this,那么内部函数就可以通过这个变量访问到this。
myObject.double = function(){
	var that = this;
	
	var helper = function (){
		that.value = add(that.value,that.value);
	};
	helper(); // 函数调用模式调用helper
};
// 方法调用模式调用double
myObject.double();
document.writenln(myObject.getValue());


构造器调用模式
JavaScript基于原型继承的语言。
如果在一个函数前面带上new来调用,那么将创建一个隐藏链接到该函数的prototype成员的新对象,
同时this将绑定到新对象上。
// 旧模式:基于类的对象构建语法
// 构造器(一般大写),带status属性
var  Cons = function(status){
	this.status = status;
};

// 给Cons一个getStatus的公共方法
Cons.prototype.getStatus = function(){
	return this.status;
}

// 构造Cons实例
var myObject = new Cons("normal");
myObject.getStatus();


Apply/Call调用模式:
function print(a, b, c, d){
	alert(a + b + c + d);
}

function example(a, b , c , d){
//用call方式借用print,参数显式打散传递
print.call(this, a, b, c, d);
//用apply方式借用print, 参数作为一个数组传递,
//这里直接用JavaScript方法内本身有的arguments数组
print.apply(this, arguments);
//或者封装成数组
print.apply(this, [a, b, c, d]);
}

apply/call方法介绍参考
http://www.cnblogs.com/fighting_cp/archive/2010/09/20/1831844.html
分享到:
评论

相关推荐

    JavaScript四种调用模式和this示例介绍

    JavaScript调用时除了声明时定义的形参外,每个函数接受两个附加参数:this 和arguments,下面为大家介绍下JavaScript四种调用模式和this

    javascript函数的四种调用模式

    先介绍一下函数的调用模式有哪四种: 函数调用模式, 方法调用模式, 构造函数调用模式, 上下文调用模式; 在这里对于函数的调用模式,主要介绍每种调用模式的this的指向和返回值。 2、代码分析 ①、函数调用...

    Javascript 函数的四种调用模式

    Javascript 函数的四种调用模式 1 函数模式  最普通的函数调用 // 声明式函数 function fn1 () { console.log(this); } // 函数表达式函数 var fn2 = function() { console.log(this); }; // 调用 函数中this...

    JavaScript函数的4种调用方法详解

    函数有四种调用模式,分别是:函数调用形式、方法调用形式、构造器形式、以及apply形式。这里所有的调用模式中,最主要的区别在于关键字 this 的意义,下面分别介绍这个几种调用形式。 本文主要内容: 1.分析函数的...

    【JavaScript源代码】详解JavaScript中的链式调用.docx

     链模式 链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧。 描述 链式调用在JavaScript语言中很常见,如jQuery、Promise等,都是使用的链式调用,...

    浅析JavaScript函数的调用模式

    我们说一个函数的调用模式是作为一个函数来调用,是要与其它三种调用模式做区分 函数其他的三种调用: 方法调用模式,构造器调用模式,apply/call调用模式。  方法的调用模式:  var obj={ fun1: function(){ //...

    JavaScript中函数对象调用模式总结

    NULL 博文链接:https://zhangxing119.iteye.com/blog/846867

    详解JavaScript中的链式调用

    链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧。 描述 链式调用在JavaScript语言中很常见,如jQuery、Promise等,都是使用的链式调用,当我们在调用...

    深入理解JavaScript系列

    深入理解JavaScript系列(4):立即调用的函数表达式 深入理解JavaScript系列(5):强大的原型和原型链 深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP 深入理解JavaScript系列(7):S.O.L.I.D...

    深入理解JavaScript系列(.chm)

    深入理解JavaScript系列(26):设计模式之构造函数模式 深入理解JavaScript系列(27):设计模式之建造者模式 深入理解JavaScript系列(28):设计模式之工厂模式 深入理解JavaScript系列(29):设计模式之装饰...

    JavaScript中调用函数的4种方式代码实例

    主要介绍了JavaScript中调用函数的4种方式代码实例,本文分别给出方法调用模式、函数调用模式、构造器调用模式、apply调用模式4种方式的代码实例,需要的朋友可以参考下

    JavaScript调用模式与this关键字绑定的关系

    this的值取决于调用的模式,调用模式:方法,函数,构造器和apply调用模式 this被赋值发生在被调用的时刻。不同的调用模式可以用call方法实现 var myObject = { value: 0, increment: function (inc) { this.value...

    js 函数调用模式小结

    在javascript中一共有四种调用模式:方法调用模式、函数调用模式、构造器调用模式和apply调用模式。这些模式在如何初始化关键参数this上存在差异

    【JavaScript源代码】easycom模式开发UNI-APP组件调用必须掌握的实用技巧.docx

    easycom模式开发UNI-APP组件调用必须掌握的实用技巧  本文旨在抛砖引玉,具体文档和easycom规范请移步uni-app官网。【传送门】easycom模式说明 easycom组件模式介绍  自HBuilderX 2.5.5起支持easycom组件模式。若...

Global site tag (gtag.js) - Google Analytics