常见面试题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属性为空字符串。
最新评论
- 相关文章
2019年开源WebRTC媒体服务器选型比较
什么是WebRTC服务器?在WebRTC的早期开始,该技术的主要卖点之一是它允许点对点(浏览器到浏览器)通信,几乎没有服务器的干预,服务器通常仅用于信令(比如用于...
增强现实引擎ARToolKit工作原理简介
ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;
Monaco Editor 编辑器拷贝粘贴功能调用和获取选中文本
有时候需要在monaco editor外部调用编辑器的内置功能比如希望在页面主工具栏实现一些快捷操作。button
CentOS6 Apache2.2用域名配置多虚拟机
在CentOS下使用域名配置多虚拟机的步骤如下:
1. 使用WebAssembly工作原理和JavaScript语言性能对比分析
本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...
CSS3特性查询(Feature Query: @supports)功能简介
这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...
ES6小知识:动态对象键(Dynamic Object Keys)语法简介
在ES5,对象的键(key)总是被解释为字符串。ES6允许我们使用计算的值作为对象的键,使用方括号:[myKey]const
JavaScript事件模型图解
在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
event是用户操作网页时发生的交互动作,比如clic...NodeJS、Java和PHP性能考量和若干参考结论
首先需要说明的是,严格而言NodeJS和Java、PHP并非对等概念,NodeJS是基于JS的一个应用程序,而Java/PHP是语言。我们这里实际指的是分别使用node、java和php来实...
CSS3弹性布局内容对齐(justify-content)属性使用详解
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存...
HTTP/2背景和新特性简介
jQuery Ribbles - 基于WebGL的水面涟漪动效插件
使用jQuery
D3.js读取外部json数据
D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN...
Three.js 3D打印数据模型文件(.STL)加载
3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...
使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...
更多...