常见面试题JS语言中四种函数调用方式实例讲解

iefreer 发表于 2017-01-04 13:00:55

标签: javascript, function, 基础知识, 面试题, bind, apply, call

- +

JS的语言世界中函数(function)是一等公民,函数的调用有多种方法。

普通调用

这个是最常见和直接的方式:

function f(x) {        
    console.log(x*x);
}
f(5); // 25

方法调用

函数被定义为对象的方法,以对象方法的形式调用,如下:

var c = {    
    v : 0,    
    f : function(x) {                
        this.v = x;    
    }
}
c.f(5);

构造器调用

和C++/Java等语言类似,当使用new操作符来创建一个对象实例时,将自动调用其构造函数:

function c(x) {        
    this.m = x;
}
var inst = new c(5);

其详细过程为1.创建一个对象 2.把函数作用域赋予该对象(即赋值this)3.调用函数体代码 4.返回对象

call/apply/bind调用

在JS中,每个自定义函数(甚至原生类型)都有一个原型(prototype)对象,该原型对象内置实现了call、appy、bind函数,

call和apply很相近,都是用来改变this,我们知道this默认指向调用者对象,通过call/apply可以改变这种默认行为。

apply() 接收两个参数,第一个用来绑定this,第二个是参数数组,你想传递给这个函数的所有参数都放在数组里,然后apply()函数会在调用函数时自动帮你把数组展开。call()的第一个参数也是用来绑定this,但是后面接受的是不定参数,而不是一个数组,代码示范如下:

function c(x, y) {    
    console.log(x+y);    
    console.log(this);
}
c.apply(null, [5, 10]); // 15, window 
c.call(null, 5, 10); // 15, window
var n = c.bind(null, 5, 10); // nothing logged
n(); // 15, window

而bind函数和call函数参数一样,但是bind实际上返回一个新的函数对象,用来延迟调用(不是马上执行)。


另外关于函数调用,我们还需要了解下函数定义方式上的不同:一种是函数声明,一种是函数表达式,

函数声明的一个重要特征是会有函数声明提升(function declaration hoisting),这也是两种声明方式的一个重要区别:

c(5); // 5
function c(x) {// 因为有函数声明提升效应,上面的函数调用是可以工作的。
    console.log(x);
}

反之,如果使用表达式,则必须注意函数调用必须在表达式定义之后:

c(5); // 报错 Uncaught TypeError: c is not a function
var c = function(x) {
    console.log(x);
}

注:上面这种函数表达式中创建的函数function关键字后面没有标识符,被称之为匿名函数(也叫Lamada函数),匿名函数的name属性为空字符串。

possitive(1) negative(0) views911 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 踏得网精选2016年度10大最佳HTML5动画

    踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...

  • WebGL、Asm.js和WebAssembly概念简介

    随着HTML技术的发展,网页要解决的问题已经远不止是简单的文本信息,而包括了更多的高性能图像处理和3D渲染方面。这正是要引入WebGL、Asm.js和WebAssembly这些技...

  • WebGL Roadmap

    Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...

  • Babylon.js入门教程和开发实例

    Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...

  • Three.js入门教程6 - 创建全景图和纹理

    全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图,你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosyn...

  • 如何实现SVG clipPath自适应被裁剪对象

    CSS3中引入的clip-path(裁剪路径)属性是一个很强大的特性。
    clip-path的含义如下图所示,好比剪纸一样,你用剪刀沿着某条路径把目标对象(图像或元素)裁...

  • WebGL入门教程4 - 使用纹理贴图(Texture Map)

    3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...

  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...

  • 如何基于Canvas来模拟真实雨景Part1:预备知识和创建基本对象

    我们之前使用CSS3实现过

  • HTML网页布局:静态、自适应、流式、响应式

    静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布...

  • Three.js 开发基础知识 - 绘制3D对象

    Three.js是一个用来简化WebGL开发的JavaScript库,比如绘制一个三维立方体,使用WebGL需要100多行,那Three.js只要10几行就能够完成。本文通过创建一个立方体来...

  • 使用requestAnimationFrame和Canvas给按钮添加绕边动画

    要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...

  • 使用CSS3实现流星雨动画教程

    很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...

  • 更多...