资讯专栏INFORMATION COLUMN

function应用技巧

Cruise_Chan / 1360人阅读

摘要:四函数的属性函数的属性列表这个属性先略过上述的属性都可以通过函数名属性来引用,是形参的个数。如果是函数表达式的话,是空串。看代码注意严格模式下不能访问对象的属性

一、new function的用法

1.用法一

此种用法的跟使用{}的区别是:它比较灵活,可以在内部定义变量、函数等

var obj = new function(){
   var a = 1; 
   var b = 2;
   this.total = a + b;
   return a + b; // 被忽略
}

相当于:

 var obj = {
   total : 3
 }

2.用法二

此种用法就是闭包而已

var test = new function(){

   var a = 1;
   var b = 2;

   return function(c){
      return a + b + c;
   }

}

test(3);//6

相当于:

var test = (function(){

   var a = 1;
   var b = 2;

   return function(c){
      return a + b + c;
   }

})();

test(3);//6
二、Function.prototype.apply.call的用法
function log(){
   if(window.console){
         // 第一个参数是apply要执行的函数,第二个参数为context,第三个参数为要执行函数的参数列表
         Function.prototype.apply.call(console.log,console,arguments);
         // Function.apply.call(console.log,console,arguments); // 也是可以的。
   }
}
三、构造函数中return

1.构造函数return基本类型的值

function Person(){

   var a = 2;

   this.a = a;

   return a;

}

var p = new Person();

console.dir(p); // 此时p的值并不是2,而是一个有一个属性a其值为2的对象

2.构造函数return Object类型的值

function Person(){

    var a = 2

    return {

       name:"李彦峰",
       a : a

    }

}
var p = new Person();

console.dir(p); // 此时p为一个对象 {name:"李彦峰",a:2}

结论:

在构造器中 return ,如果是基本类型的值,那么使用 new 操作符将会按照预期,返回一个对象,就相当于构造函数中的 return 语句不存在一样

在构造器中如果 return 的是一个Object类型(function/基本类型的包装类型/Object类型),那么 new 操作符就相当于不存在一样,也就是说,js引擎会把 return 出去的引用值作为变量,而不会把 new 出来的新对象的引用赋值给相应的变量。。

四、函数的属性

函数的属性列表

arguments

caller

length

name

prototype(这个属性先略过)

上述的属性都可以通过 函数名.属性来引用,length是形参的个数。如果是函数表达式的话,name是空串。

function outer(a,b,c){
    console.log(outer.arguments); // [1,2,3,4]
    console.log(outer.caller); // null
    console.log(outer.length); // 3
    console.log(outer.name); // outer
    function inner(){
        console.log(inner.arguments); // []
        console.log(inner.caller); // 打印出整个函数体
        console.log(inner.length); // 0
        console.log(inner.name); // inner
 
        // 内部函数访问外部函数的属性    
        console.log(arguments.callee.caller.arguments); // [1,2,3,4]
        // console.log(inner.caller.arguments);  // [1,2,3,4]
        console.log(arguments.callee.caller.caller); // null
        // console.log(inner.caller.caller); // null
        console.log(arguments.callee.caller.length); // 3
        // console.log(inner.caller.length); // 3
        console.log(arguments.callee.caller.name); // outer
        // console.log(inner.caller.name); // outer
    }
    inner();
}
outer(1,2,3,4);
五、局部变量

对于局部声明的重复变量,只有第一个声明有效,也就是说,js引擎会忽略除了第一个之外的所有的声明

 
 // 第一种
 function test(){
   
     var name = "李彦峰";
     var name; 
     console.log(name); // 李彦峰

 }

 // 第二种
 function test(){
    
     var name;
     var name = "李彦峰";
     console.log(name); // 李彦峰
    
 }

注意:第二种好像不符合 对于局部声明的重复变量,只有第一个声明有效的说法,其实也是符合的,因为js引擎会对函数进行2轮处理,局部变量的声明在第1轮处理(变量声明提升),所以第1轮会保证只有一个name被声明,第2轮才进行局部变量的初始化(代码执行到赋值语句才进行初始化),即会把第1轮声明的局部变量赋值。。

严格模式下不能通过函数名.arguments的方式访问arguments对象,不能访问caller属性

六、arguments

arguments对象拥有一个callee属性,该属性是一个指针,指向拥有这个arguments对象的函数

arguments对象内部属性值是跟参数一一对应的,改变其中一个的值都会影响另外一个。

看代码:

function test(a,b,c){
    console.log(arguments); // [1,2,4]
    a = 8;
    console.log(arguments); // [8,2,4]
    arguments[1] = 909;
    console.log(b); // 909
    console.log(arguments); // [8,909,4]
}
test(1,2,4);

注意:严格模式下不能访问arguments对象的callee属性

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78958.html

相关文章

  • 函数式编程中局部应用(Partial Application)和局部套用(Currying)的区别

    摘要:真正留给我们要实现的仅仅是返回另外一部分用于局部应用的一元函数罢了。总结各用一句话做个小结吧局部应用是一种转换技巧,通过预先传入一个或多个参数来把多元函数转变为更少一些元的函数甚或是一元函数。 局部应用(Partial Application,也译作偏应用或部分应用)和局部 套用( Currying, 也译作柯里化),是函数式编程范式中很常用的技巧。 本文着重于阐述它们的...

    AaronYuan 评论0 收藏0
  • 【译】使用 AngularJS 和 Electron 构建桌面应用

    摘要:原文的框架以前叫做允许你使用和编写跨平台的桌面应用。这个教程向我们展示了如何使用和构建一个桌面应用。我们的应用看起来会是这个样子配置开发环境是微软的一款跨平台代码编辑器。是基于和微软自身的开发的。我们需要用我们最终构建的应用来替换它。 原文:Creating Desktop Applications With AngularJS and GitHub Electron showImg(...

    maxmin 评论0 收藏0
  • 使用 Electron 自定义菜单

    摘要:使用自定义菜单此系列文章的应用示例已发布于可以或下载后运行查看欢迎使用和模块可用于创建自定义本地菜单有两种菜单应用程序顶部菜单和上下文右键单击菜单在浏览器中打开完整的文档创建应用程序菜单支持进程使用和模块可以自定义你的应用程序菜单如果 使用 Electron 自定义菜单 此系列文章的应用示例已发布于 GitHub: electron-api-demos-Zh_CN. 可以 Clone ...

    MageekChiu 评论0 收藏0
  • 5分钟快速集成UCloud实时音视频服务URTC-Electron端

    摘要:通过集成,可以从零开始,快速搭建出实时音视频通信平台,可以应用于语音和视频社交在线教育和培训远程医疗在线会议直播等多种业务场景。集成之前,需要在官网控制台创建应用。使用服务之前,首先需要注册账号并且完成实名认证。确定后,自动生成。通过集成URTC SDK,可以从零开始,快速搭建出实时音视频通信平台,可以应用于语音和视频社交、在线教育和培训、远程医疗、在线会议、直播等多种业务场景。 集成URT...

    Tecode 评论0 收藏0

发表评论

0条评论

Cruise_Chan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<