匿名函数自执行原理和instanceof运算符执行原理

今天收到RSS订阅中有一篇《Javascript – Arraylike的7种实现》,看第一种实现方式是,瞬间被!function(){}()这种匿名函数自执行方式给亮瞎了眼睛。这种写法绝对是装逼神器,代码如下:

 1 !function () {
 2     //通过闭包实现
 3     var List = function () {
 4         var list = [],
 5             self = {
 6                 constructor: List,
 7                 //如果希望更像原生一点,将length定义为属性,那么length则需要自己维护
 8                 length: function () { return list.length; },
 9                 add: function (item) {
10                     list.push(item);
11                 },
12                 eq: function (index) {
13                     return list[index];
14                 }
15             };
16         return self;
17     };
18     //测试
19     console.group(‘第一种 - 通过闭包实现‘);
20     var demo = new List();
21     demo.add(‘List - add()‘);
22     console.log(‘demo instanceof List : %c‘ + (demo instanceof List), ‘color:red;‘);
23     console.log(‘demo.constructor === List :%c‘ + (demo.constructor === List), ‘color:blue‘);
24     //无法通过索引demo[0]这种方式访问
25     console.log(‘成员:[ ‘ + demo.eq(0) + ‘ , ‘ + demo.eq(1) + ‘ ]‘);
26     console.log(‘length:‘ + demo.length());
27     //注意看demo对象
28     console.log(demo);
29     console.groupEnd();
30 }();

其实-function(){}();+function(){}();~function(){}()这些也可以实现匿名函数的自执行,其原理就是当function(){}()前面有一个运算符时,js解释器在“看到”运算符后,会在后面继续寻找用于计算的值function(){},然后执行这个函数得到用于运算的值。在进行取反或加之类的运算时,由于js会将除null,undefined,0等个别的数转换为boolan值中的false,其它的字符串,对象函数都会转换为true,所以对函数进行一次取反运算不会抛出异常,也不会改变这个函数。同理,进行加运算也是一样,js会把对象和函数尝试转换为数字,得到NaN而不会抛出异常。这个可以使用如下代码进行验证:

console.log(!function () {
        console.log(1);
    }) ;  //只会打印出false,不会打印出1
console.dir(-function () {
        console.log(1);
    });  //只会打印出NaN

  很明显,使用?function(){}()会比使用(function(){})()多一次运算过程。当js解释器知道function(){}是个函数后,在其后面加一个括号,则其调用这个函数,其是这和将function(){}赋值给一个变量a,然后使用a()调用一样。那么为什么不能直接使用function(){}()调用呢?其实我们可以看这样调用在chrome中报的错:  Uncaught SyntaxError: Unexpected token ( ,这和写function()报出的错误一样。可以发现,js解释器将function(){}()解析成了function();{}();为什么会解析成这样呢?还有就是为什么写成(function(){}())也可以正确执行呢?我们可以去看看函数的定义,在《javascript权威指南第6版》中对于函数的定义这样写道:函数使用function关键字来定义,它可以用在函数定义表达式或者函数声明语句里。函数定义表达式的语法为var functionName = function(){};函数声明语句语法为function funcname(){};所以,如果不写括号,javascript解释器会试图将关键字function解析为函数声明语句(同理用于运算的值只能是表达式和不能是声明语句)。在function前面使用了圆括号,则javascript解释器才会正确地将其解析为函数定义表达式(匿名)。这样就可以指定,Unexpected token ( 错误是因为expect 函数名。

instanceof

我们再来看看最上面代码的22行,

demo instanceof List   =====> false

其实很简单,因为List有返回值,所有var demo = new List();其实等价于var demo = List(); 所有demo并不是List的实例。在来看看instanceof的定义:

instanceof运算符希望左操作数是一个对象,有操作数标识对象的类。如果左侧的对象是右侧类的实例,则表达式返回true;否则返回false。JavaScript中对象的类是通过初始化它们的构造函数来定义的。这样的话,instanceof的右操作数应当是一个函数,如果右操作数不是函数,则抛出一个类型错误异常。注意,所有的对象都是Object的实例。

为了计算表达式 o instanceof f,javascript首先计算f.prototype,然后在原型链中查找o,如果找到,那么o是f(或者f的父类)的一个实例,则表达式instanceof返回ture。

其原理是对象o中存在一个隐藏成员__proto__,该成员指向其父类的原型,如果父类的原型是另一个类的实例的话,这个原型对象中也存在__proto__指向另外一个类的原型,这就是原型链。

console.log(p.__proto__ === Person.prototype); //true
console.log(li.__proto__ === List.prototype); //false

function inherit(p){
    function f(){}
    f.prototype = p;
    return new f();
}
var student = inherit(p); //student对象继承p对象。

console.log(student.__proto__ === Person.prototype); //false
console.log(student.__proto__.__proto__ === Person.prototype); //true

  

时间: 2024-11-08 16:24:41

匿名函数自执行原理和instanceof运算符执行原理的相关文章

JavaScript 函数声明,函数表达式,匿名函数的区别,深入理解立即执行函数(function(){…})()

function fnName(){xxxx}; // 函数声明:使用function关键字声明一个函数,在指定一个函数名. //例如:(正常,因为 提升 了函数声明,函数调用可以在函数声明之前) fnName(); function fnName(){ alert('Hello World'); } var fnName = function(){xxxx}; //函数表达式:使用function关键字声明一个函数,但是未给函数命名,最后将匿名函数赋予给一个变量. //例如1:(报错,变量fn

自执行匿名函数剖析

引入 在很多js代码中我们常常会看见这样一种写法: (function( window, undefined ) { // code })(window); 这种写法我们称之为自执行匿名函数(self-executing anonymous function). 正如它的名字一样,它是自己执行自己的,前一个括号是一个匿名函数,后一个括号代表立即执行. 函数和函数表达式的区别 语法 function keqing(){ //函数 alert('Hi~'); } var keqing = funct

JS执行顺序-函数声明提升、匿名函数、函数表达式

大方向上: JS 是按照 代码块 进行 编译.执行 的. 学习至: 1.变量声明提升 2.新唐的博客 3.js中匿名函数的创建与调用方法分析 4.前端圣经 - 高程三 5.深入理解变量声明提升和函数声明提升 因为没有好好地分类.可能会比较杂.为了系统地学习,先了解几个概念. 一. <script> 区分的代码块. JS是按照代码块 编译 和 执行的.代码块间 相互独立,但是 变量和方法 共享. <script> alert('代码块一'); </script> <

js匿名函数及闭包(javaScript高级程序设计第3版)

一.匿名函数 //普通函数 function box() { //函数名是box return 'Lee'; } //匿名函数 function () { //匿名函数,会报错 return 'Lee'; } //通过表达式自我执行 (function box() { //封装成表达式 alert('Lee'); })(); //()表示执行函数,并且传参 //把匿名函数赋值给变量 var box = function () { //将匿名函数赋给变量 return 'Lee'; }; aler

python基础-匿名函数、内置函数、正则表达式、模块

1. 匿名函数 1.1 有名函数 有名函数:定义了一个函数名,函数名指向内存地址:通过函数名进行访问.函数名加括号就可以运行有名函数,例如:func() def func(x, y, z = 1): return x + y + z print(func(1,5,2)) 1.2 匿名函数 匿名函数:没有名字的函数,定义的时候不需要函数名:定义匿名函数的关键字是:lambda 特点: 1.没有函数名 2.函数自带return 应用场景: 1.应用于一次性的地方 2.临时使用 salaries={

Python之路Python作用域、匿名函数、函数式编程、map函数、filter函数、reduce函数

Python之路Python作用域.匿名函数.函数式编程.map函数.filter函数.reduce函数 一.作用域 return 可以返回任意值例子 def test1(): print("test1") def test(): print("test") return test1 res = test() print(res) 输出结果 test <function test1 at 0x021F5C90> 分析:这里print(res)输出的是te

匿名函数和defer

package main import "fmt" func main() { a := 10 b := 20 defer func() { fmt.Printf("a = %d, b = %d\n", a, b) }() a = 111 b = 222 fmt.Printf("a = %d, b = %d\n", a, b) } 执行后得到以下的结果,需要注意以下: 1.defer的匿名函数是在整个函数执行结束前的一瞬间执行的,即延时执行 2.

关于js的闭包和匿名函数

关于js闭包.之前我一直以为是匿名函数,以为封闭式的创建即执行销毁就是闭包,其实这是匿名函数,不一样的.也没有闭包的使用经验. 后来去网上查了下才知道,闭包的意思是:函数内部还有函数,返回一个函数,内部函数可访问外部函数的变量. 一个最简单的案例: a是外部函数,b是内部函数,b可以使用a的变量i,调用a函数返回b函数,执行c既是执行b.其实也就意味着在a函数的外部,读取到了a函数内部的变量值. a中的变量i将一直在内存中,直至c变量删除. 删除变量:delete c; { let a=func

PHP匿名函数、闭包、function use

匿名函数,也叫闭包函数(closures) ,允许临时创建一个没有制定名称的函数.最常用作回调函数(callback)参数的值. 闭包函数也可以作为变量的值来使用.PHP将会自动把此种表达式转换成内置类 Closure 的对象实例.把一个 Closure 对象赋值给一个变量的方式与普通变量赋值的语法一样,最后也要加上分号. 匿名函数变量赋值实例:<?php$printString = function($arg){ echo $arg;}; $printString('hello world')