js函数之四大调用模式

nianzhilian 2018-03-06 原文

js函数之四大调用模式

一、方法调用模式

当一个函数调用保存为一个对象的属性时我们称之为方法调用。

var myObject = {
            value:0,
            increment:function(inc){
                this.value += typeof inc === 'number' ? inc : 1;
            }
        }
        myObject.increment();
        document.writeln(myObject.value)
        myObject.increment(3);
        document.writeln(myObject.value)

方法可以使用this访问自己所属的对象，所有它能从对象中访问value并修改value属性当this对象发生在调用的时候这个超级延时绑定可以对this高度复用。

二、函数调用模式

var add = function(num1,num2){
            if(typeof num1!=='number' || typeof num2!=='number'){
                throw{
                    name:'error',
                    message:'param is not number'
                }
            }
            return num1 + num2
        }

        myObject.dobule = function(){
            var that = this;
            var helper = function(){
                try {
                    that.value = add(that.value,that.value);
                } catch (e) {
                    document.writeln('name'+e.name+'message'+e.message)
                }
            }
            helper();//函数式调用
        }

        myObject.dobule();
        document.writeln(myObject.value);

以此模式调用函数时this指的是全局对象，这是语言上设计的一个错误。幸运的是这有一个容易的解决方案在函数内部定义一个变量赋值this，那么内部函数就可以通过函数内部的变量访问this。

三、构造器式调用js是基于原型继承的语言不像其他编程语言是基于类的。但是js也提供了一套和基于类的语言类似的对象构建语法

var Fu = function(str){
            this.name = str;
        }
        //通过原型继承扩展方法
        Fu.prototype.get_name = function(){
            return this.name
        }
        // 模拟构造一个新的对象实例
        var fu = new Fu('张三');
        // 函数式调用方法
        document.writeln(fu.get_name());

如果创建函数的目的是为了结合new来调用那它就被称为构造器式调用

四、apply调用模式

var array = [3,4];
var sum = function(){
    try {
                   add.apply(null,array);
                } catch (e) {
                    document.writeln('name'+e.name+'message'+e.message)
                }
}

//函数式调用
document.writeln(sum());

apply用法

发表于 2018-03-06 22:09 nianzhilian 阅读(…) 评论(…) 编辑收藏

刷新评论刷新页面返回顶部