JavaScript函数调用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);  // 2

  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);// 9
/*
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代码片段集锦

如何将此 JavaScript 代码片段翻译成 Parenscript?

php 一个自定义的try..catch包装器代码片段,用于执行模型函数,使其成为一个单行函数调用

10个JavaScript代码片段,使你更加容易前端开发。

10个JavaScript代码片段,使你更加容易前端开发。

a标签调用js的几种方法