常见面试题JS语言中四种函数调用方式实例讲解
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属性为空字符串。
最新评论
- 相关文章
Monaco Editor 编辑器拷贝粘贴功能调用和获取选中文本
有时候需要在monaco editor外部调用编辑器的内置功能比如希望在页面主工具栏实现一些快捷操作。button
常见面试题JavaScript闭包(ES5语法)
JavaScript闭包(Closure)是常见的JS面试题,是否理解闭包是一个简单的区分JS初级和高级程序员的判例。几乎每个JS程序员都在使用闭包,有意或无意间。比如编写一个jQuery鼠标点击处理函数:$(function()
深入理解CSS3滤镜(filter)功能和实例详解
CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、...HTML5动画背后的数学2 - 仿生智能算法综述
三维向量的简单运算和实用意义
在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...
CSS3图片混合(Blend)效果及其参考计算公式一览表
在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...
使用Canvas绘制完美的不完美圆形
真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...
Three.js 开发基础知识 - 绘制3D对象
Three.js是一个用来简化WebGL开发的JavaScript库,比如绘制一个三维立方体,使用WebGL需要100多行,那Three.js只要10几行就能够完成。本文通过创建一个立方体来...
如何使用CSS3实现一个平滑的3D文本标题
要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...
SVG过滤器feColorMatrix矩阵变换效果用法详解
在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...
使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...
更多...