学习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 相关文章推荐
javascript 写类方式之一
Jul 05 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
JavaScript中this函数使用实例解析
Feb 21 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函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
jquery attr 设定src中含有&(宏)符号问题的解决方法
2011/07/26 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
在Python中进行自动化单元测试的教程
2015/04/15 Python
详解Python Socket网络编程
2016/01/05 Python
Python中random模块生成随机数详解
2016/03/10 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
python urllib爬虫模块使用解析
2019/09/05 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
生物科学专业个人求职信范文
2013/12/05 职场文书
初二物理教学反思
2014/01/29 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
学习十八大的心得体会
2014/09/01 职场文书
高三数学教学反思
2016/02/18 职场文书