学习javascript的闭包,原型,和匿名函数之旅

 更新时间:2015年10月18日 09:46:02   作者:bondage  
Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性,本文给大家介绍js的闭包,原型,和匿名函数之旅,感兴趣的朋友一起学习吧

本文通过示例给大家介绍javascript的闭包,原型,和匿名函数,具体详情请看下文。

一 .>关于闭包

理解闭包 需要的知识

1.变量的作用域

例1:

var n =99; //建立函数外的全局变量
function readA(){
  alert(n); //读取全局变量
}

readA(); //执行此函数

例2:

function readB(){
  var c = 9;
  function readC(){
    console.log(c); //ok c可见
  }
  return readC;
}
alert(c); //error c is not defined.

    note:  函数内部声明变量c时,一定要加上 var,否则 c会成为一个全局变量

所以函数内可见全局变量,函数内的局部变量却对外不可见
js的作用域是链式的,父对象里的变量总对子对象可见,子对象的对象却对父对象不可见
当我们要获取函数内的内部变量

于是有了例3:

function readB(){
  var c = 9;
  function readC(){
    console.log(c);
  }
  return readC();
}
readB();

闭包很类似基于此做了一个变式

function readB(){
  var c = 9;
  function readC(){
    console.log(c);
  }
  return readC;
}
var res = readB();
res();

note:

1.慎用闭包,注意内存占用,因为它会保存父函数的状态
2.不要随便改变父函数内部变量的值

理解闭包

   note: this 指包含它的函数被执行时所属的对象

例1:

var name = "The Window";

var object = {
  name : "My Object",

  getNameFunc : function(){  //此时this (这个执行函数)是属于object对象的,是object对象下的一个属性的值
    return function(){   //此时this (这个执行函数)是一个匿名函数,从根对象window生成,是属于window
      return this.name;
    };
  }
};
console.log(object.getNameFunc()()); //the window 

例2:

var name = "The Window";

var object = {
  name : "My Object",

  getNameFunc : function(){
    var that = this;
    return function(){
      return that.name;
    };

  }
};
console.log(object.getNameFunc()());  //My Object

二 .>匿名函数

直接定义一个匿名函数 然后调用这个匿名函数,这种形式在jquery插件的定义时很常见

1.通过函数字母量的方式. 先声明一个匿名函数,然后执行它

( function(){
  console.log('excute self');
}) ();

2.通过优先表达式的方式 , 由于Javascript执行表达式是从圆括号里面到外面,所以可以用圆括号强制执行声明的函数

(
  function () {
    alert(2);
  }
  ()
);

3.void操作符 用void操作符去执行一个没有用圆括号包围的一个单独操作数

void function(){ console.log('void') } ();

三 .>关于prototype

原型 prototype

理解js中的protitype首先需要明白js的面向对象设计

function People(name){
  this.name = name;

  console.log(this); //Window 或者 object { name: 'xxx' }
  this.introduce = function(){  //实例对象方法
    console.log(this.name);
  }
}
new People('leon').introduce();
//这里有一个非常有趣的现象,结合前面的来看的话,
//首先function people里的this指向的默认是Window对象
//当 调用 People();时 this 输出为 Window对象
//但一旦调用new People('xx')时, this 输出为 {name:'xx'}
//其实也很好理解,一旦new ,便新建了一个对象

实例对象方法只能这样 new People('leon').introduce(); 调用 因为它使用前必须初始化

类的对象的静态方法

var People = {}; //等于一个对象 {} 或者 function 数组都可以 此时People需要是引用类型
People.sayhi = function(to_who){
  console.log('hi '+ to_who);
}
People.sayhi('lee'); //调用时这样调用

原型方法

var People = function(){};       // People 必须为一个 function(){} 即为一个类,不能是对象或值类型或其他引用类型
People.prototype.meet = function(meet_who) {
  console.log('I am '+this.name + ',going to meet ' + meet_who);
};
new People('lee').meet('xx');

原型方法只能由该类的对象 调用

 A.prototype = new B();

原型看起来很像继承,但其实不是,它更像clone更准确

如果出现了父类和子类出现了重名的属性,采取就近原则,如果找不到一级一级向上找,如果要指定调用上级的属性,使用call方法

extendClass.prototype = new baseClass();
var instance = new extendClass();
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);
obj1.func.call(obj);

以上内容是小编给大家分享的学习javascript的闭包,原型,和匿名函数之旅,希望对大家有用。

相关文章

  • JS关闭子窗口并且刷新上一个窗口的实现示例

    JS关闭子窗口并且刷新上一个窗口的实现示例

    这篇文章主要介绍了JS关闭子窗口并且刷新上一个窗口的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 基于jquery实现全屏滚动效果

    基于jquery实现全屏滚动效果

    相信大家都很喜欢网易邮箱、QQ浏览器的官方网站这样的可全屏滚动的效果,也许更多的朋友想把全屏滚动效果做到自己的网站中,本文就带着大家一起完成这个效果
    2015-11-11
  • 理解 JavaScript 预解析

    理解 JavaScript 预解析

    JavaScript是解释型语言是毋庸置疑的,但它是不是仅在运行时自上往下一句一句地解析的呢?
    2009-10-10
  • javascript之锁定表格栏位

    javascript之锁定表格栏位

    javascript之锁定表格栏位...
    2007-06-06
  • Avalon中文长字符截取、关键字符隐藏、自定义过滤器

    Avalon中文长字符截取、关键字符隐藏、自定义过滤器

    avalon是一个简单易用迷你的MVVM框架。通过本文给大家介绍Avalon中文长字符截取、关键字符隐藏、自定义过滤器的相关资料,需要的朋友一起学习吧
    2016-05-05
  • JavaScript实现读取上传视频文件的时长和第一帧画面过程讲解

    JavaScript实现读取上传视频文件的时长和第一帧画面过程讲解

    当我们做一个后台系统的音视频管理模块时,通常要限制文件的大小和类型,这篇文章主要介绍了JavaScript实现读取上传视频文件的时长和第一帧画面过程,需要详细了解实现方法可以参考下文
    2023-05-05
  • 微信小程序实现留言板

    微信小程序实现留言板

    这篇文章主要为大家详细介绍了微信小程序实现留言板,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • JS实现图片元素转BASE64编码的简单示例

    JS实现图片元素转BASE64编码的简单示例

    在Web开发中,我们经常需要将图片转换为Base64格式,以便在不依赖外部资源的情况下直接在HTML中使用,在这篇文章中,我将向您展示如何使用JavaScript将图片元素转BASE64编码,需要的朋友可以参考下
    2023-12-12
  • 20个你不得不知道的js位运算用法

    20个你不得不知道的js位运算用法

    位运算,那些看似晦涩但又蕴含无限魔力的数字魔术,在JavaScript开发中扮演了默默无闻却又至关重要的角色,本文介绍多个js位运算的使用场景,阐述在JavaScript中,如何巧妙运用位运算实现效率的提升和算法的优化,需要的朋友可以参考下
    2023-12-12
  • JavaScript实现PC端横向轮播图

    JavaScript实现PC端横向轮播图

    这篇文章主要为大家详细介绍了JavaScript实现PC端横向轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02

最新评论