深入浅析JS Function()构造函数

js中function对象是一个令人着迷的东西，但由于他太过于灵活，常常令人迷惑.

先给大家看个代码片段。

var scope="global";
function constructFunction(){
var scope="local";
return new Function(" return scope");
}
constructFunction()();
　function constructFunction2(){
var scope="local";
return function(){
return scope;
}
}
constructFunction2()();

　 　看到这两个你的第一感觉是什么？都返回 "local"？？，如果是这样的话就需要好好看一下下面的讲解了。constructFunction2()了解闭包的就应该很容易的知道答案 是"local"，这里就不细讲了。下面我着重讲一下constructFunction()的情况。

　　这里用到了 Function()构造函数, Function()构造函数虽然不是很常用，但是了解一下还是很有必要的。

　　不管是通过函数定义语句还是函数直接量表达式，函数的定义都要使用 function()关键字。单函数还可以通过Function()构造函数来定义，比如：

　var f=new Function("x","y","return x*y");

　　这一行的实际效果和下面的一行代码是等价的。

var f=function(x,y){x*y};

　 　Function()构造函数可以传入任意数量的字符串实参，最后一个实参所表示的文本是函数体；它可以包含任意的Javascript 语句，每条语句之间用分号分割。传入构造函数的其他所有的实参字符串是指定函数的名字的字符串。如果定义的函数不包含任何参数，只需给构造函数简单地传入 一个字符串函数体即可。

　　关于Function()构造函数需要特别注意一下几点：

　　1.Function()构造函数允许JavaScript在运行时动态的创建并编译函数。

　　2.每次调用Function()构造函数都会解析函数体，并创建新的函数对象。如果是在一个循环或者多次调用的函数中执行这个构造函数，执行效率会受到影响。相比之下，循环中的嵌套函数和函数定义表达式则不会每次执行时都重新编译。

　　2.最后的一点，也是关于Function()构造函数非常重要的一点，就是它所创建的函数并不使用词法作用域，相反，函数体代码的编译总是会在顶层函数执行。看完这一点，上面的函数constructFunction()()；返回“global”应该很容易理解了吧？

以上所述是小编给大家介绍的JS Function()构造函数，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • javascript中的 object 和 function小结

    在学习过传统的面向对象语言后,如 java c++,转学 javascript 却有点不适应,特别是 javascript 中所谓的 object(对象) function(函数),有时候会被搞晕.于是乎简单整理了下面的一些概念性的东西,方便学习和理解,会结合一点 java面向对象的知识加以说明. 先了解几个概念: 1.首先 Object 在 ECMAScripe 中是指什么,在 ECMAScripe 中有5种简单数据类型:Undefined,Null,Boolean,Number,String

  • 深入浅析JavaScript中的Function类型

    Function是javascript里最常用的一个概念,javascript里的function是最容易入手的一个功能,但它也是javascript最难理解最难掌握的一个概念. 1. Function类型是js中引用类型之一,每个函数实际上都是Function类型的实例对象,具有自己的属性和方法.正因为函数式对象,所以函数名实际上也是一个指向函数对象的指针. 2. 常用的函数定义方式 1. 函数声明: function sum(a , b ){ return a+b; } 2. 表达式: va

  • JavaScript function函数种类详解

    本篇主要介绍普通函数.匿名函数.闭包函数 目录 普通函数:介绍普通函数的特性:同名覆盖.arguments对象.默认返回值等. 匿名函数:介绍匿名函数的特性:变量匿名函数.无名称匿名函数. 闭包函数:介绍闭包函数的特性. 1. 普通函数 1.1 示例 function ShowName(name) { alert(name); } 1.2 Js中同名函数的覆盖 在Js中函数是没有重载,定义相同函数名.不同参数签名的函数,后面的函数会覆盖前面的函数.调用时,只会调用后面的函数. var n1 =

  • JavaScript获取function所有参数名的方法

    我写了一个 JavaScript函数来解析函数的参数名称, 代码如下: function getArgs(func) { // 先用正则匹配,取得符合参数模式的字符串. // 第一个分组是这个: ([^)]*) 非右括号的任意字符 var args = func.toString().match(/function\s.*?\(([^)]*)\)/)[1]; // 用逗号来分隔参数(arguments string). return args.split(",").map(functi

  • Javascript使用function创建类的两种方法(推荐)

    1.使用function类 //myFunction.js var CMyFunc=function() { //类的公共方法,供外部调用 this.Func1=function() { var i=0; return i; } this.Func2=function() { _privateFunc(); } //类中的私有方法,供公共方法调用 function _privateFunc() { return 0; ] } CMyFunc myFunc=new CMyFunc(); 使用:其它

  • 浅析JS中对函数function的理解(基础篇)

    正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定义方式(见下文)之外,还有一种定义的方式能更直观的体现出这个概念: var sum = new Function("num1", "num2", "return num1 + num2"); //不推荐 Function的构造函数可以接收任意数量的参

  • 浅谈javascript中的Function和Arguments

    javascript的Function 属性: 1.Arguments对象 2.caller 对调用单前函数的Function的引用,如果是顶层代码调用,  则返回null(firefox返回undefined).  注:只有在代码执行时才有意义 3.length 声明函数是指定的命名参数的个数(函数定义是,定义参数的个数) 4.prototype 一个对象,用于构造函数,这个对象定义的属性和方法  由构造函数创建的所有对象共享. 方法: applay() --> applay(this,[])

  • 每天一篇javascript学习小结（Function对象）

    小编两天都没有更新文章了,小伙伴们是不是等着急了,今天开始再继续我们的<每天一篇javascript学习小结>系列文章,希望大家继续关注. 1.Function  函数调用(类似call方法) function callSomeFunction(someFunction, someArgument){ return someFunction(someArgument); } function add10(num){ return num + 10; } var result1 = callSo

  • 深入浅析JS Function()构造函数

    js中function对象是一个令人着迷的东西,但由于他太过于灵活,常常令人迷惑. 先给大家看个代码片段. var scope="global"; function constructFunction(){ var scope="local"; return new Function(" return scope"); } constructFunction()(); function constructFunction2(){ var scop

  • JS特殊函数(Function()构造函数、函数直接量)区别介绍

    函数定义 函数是由这样的方式进行声明的:关键字 function.函数名.一组参数,以及置于括号中的待执行代码. 函数的构造语法有这三种: Js代码 复制代码 代码如下: 1.function functionName(arg0, arg1, ... argN) { statements }//function语句 2.var function_name = new Function(arg1, arg2, ..., argN, function_body);//Function()构造函数 3

  • 浅析JS原型继承与类的继承

    我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS类的继承</title> </head> <body> /* -- 类式继承 -- */ <script type="text/javascript"> //先声明一个超类 var Animal = function

  • JS基于构造函数实现的菜单滑动显隐效果【测试可用】

    JS基于构造函数实现的菜单滑动显隐效果【测试可用】

    本文实例讲述了JS基于构造函数实现的菜单滑动显隐效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

  • 浅析JS动态创建元素【两种方法】

    浅析JS动态创建元素【两种方法】

    前言: 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态创建元素(创建元素 => 找到父级元素 => 在指定位置插入元素) 一.字符串拼接形式 为了更好的理解,设定一个应用场景. 随机生成一组数字,将这组数据渲染为条形图的形式,放在div[id="container"]中,如下图 <div id="containe

  • 浅析js绑定事件的常用方法

    浅析js绑定事件的常用方法  <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:

  • 深入浅析JS的数组遍历方法(推荐)

    用过Underscore的朋友都知道,它对数组(集合)的遍历有着非常完善的API可以调用的,_.each()就是其中一个.下面就是一个简单的例子: var arr = [1, 2, 3, 4, 5]; _.each(arr, function(el) { console.log(el); }); 上面的代码会依次输出1, 2, 3, 4, 5,是不是很有意思,遍历一个数组连for循环都不用自己写了._.each()方法遍历数组非常好用,但是它的内部实现一点都不难.下面就一起来看看到底是如何实现_

  • JS Object构造函数之Object.freeze

    概述 Object.freeze(obj)可以冻结一个对象.一个被冻结的对象再也不能被修改: 冻结了一个对象则不能向这个对象添加新的属性,不能删除已经属性,不能修改该对象已有属性的可枚举性.可配置性.可写性.以及不能修改已有属性的值. 此外,冻结一个对象后该对象的原型也不能被修改.freeze()返回和传入的参数是相同的对象. JavaScriptDemo: Object.freeze() const obj = { prop:42 } Object.freeze(obj) obj.prop =

  • 浅析js中事件冒泡与事件捕获

    目录 01-事件冒泡 1.1-事件冒泡介绍 1.2-事件冒泡利用(事件委托) 1.3-事件冒泡影响 与 阻止事件冒泡 02-事件捕获 1.1-事件捕获介绍 1.2-事件三个阶段 01-事件冒泡 1.1-事件冒泡介绍 本小节知识点:介绍什么是事件冒泡 事件冒泡:如果一个元素的事件被触发,那么他的所有父级元素的同名事件也会被依次触发 元素->父元素->body->html->document->window 事件冒泡一直存在,只不过以前我们没有给父级元素加同名事件 <!DO

  • 浅析JS异步加载进度条

    浅析JS异步加载进度条

    展现效果: 1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现. 实现思路: 1.当用户点击load button执行异步请求. 调用方法 出现加载条 2.怎么实现进度条呢? 1) 在document.body 新增一个div.覆盖浏览器. 设置背景会灰色. z-index = 999. 加载的时候让用户无法修改界面值 2) 在document.body 新增一个动态的div. 代码实现: Main.html: <!DOCTYPE html> <html>

随机推荐