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


Posted in Javascript onOctober 18, 2015

本文通过示例给大家介绍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的闭包,原型,和匿名函数之旅,希望对大家有用。

Javascript 相关文章推荐
用js遍历 table的脚本
Jul 23 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
jQuery知识点整理
Jan 30 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
JS闭包经典实例详解
Dec 20 Javascript
JS轮播图的实现方法
Aug 24 Javascript
Javascript中的数据类型之旅
Oct 18 #Javascript
谈谈JavaScript自定义回调函数
Oct 18 #Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 #Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 #Javascript
JavaScript实现的背景自动变色代码
Oct 17 #Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 #Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 #Javascript
You might like
一段php加密解密的代码
2007/07/16 PHP
用mysql内存表来代替php session的类
2009/02/01 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
对python判断是否回文数的实例详解
2019/02/08 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
飞利浦法国官网:Philips法国
2019/07/10 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
四年级评语大全
2014/04/21 职场文书
个人查摆剖析材料
2014/10/16 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android