对JavaScript闭包和原型理解

最近在学js脚本的一些东西觉得里面有2个知识点比较难理解所以做了如下总结。

1.闭包

简单的理解:一个函数a ,内部有个函数b,那么这个函数b当被作为a函数的返回值得时候被外部的全局变量引用了,那么这就是一个闭包。

官方解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

如:

a=function() {

var n=1;

    b=function(

      n=n+1;

      alert(n)

    }

return b;

  }

var c=a()
alert(c())//相当于a()(),也就是调用了b()方法

alert(c())//再次调用了b(),这时候n还会加1,为3,因为b方法被c引用了无法释放内存所以b一次存在,那么b依赖于a,a就必须一直在内存,所以a内的n变量也就一直无法释放了

这就是一个闭包,外部变量c得到了a方法的返回值,那么这时候c就是等于b方法,再调用一次c(也就是b方法)

2.原型理解

简单的理解:就是给一个类扩展一些功能和方法。

//声明一个类
Person= function(name,age)
{
this.name=name;
this.age=age;
}
//使用原型给类添加方法
Person.prototype.show=function()
{
alert("我叫"+this.name+",今年"+this.age);
}
//创建两个对象
var p1 =new Person(‘张三‘,20);
var p2 =new Person(‘李四‘,23);
//调用原型里面的方法
person1.show();
person2.show();

可以看到person类/函数在原来只有2个属性的基础上多了一个show方法来展示自己的属性,就是说扩展的原型方法可以访问原函数内部的变量。

3.原型链

js中任何一个对象都有一个prototype的属性,在js中可以把它记为:__proto__(有点像父类指针super,指向它的上一个原型)(Function.prototype除外,它是函数对象,但它很特殊,他没有prototype属性(前面说道函数对象都有prototype属性))

简单的说:原型链的作用是用来继承的。

比如:

var a = { 
x: 10, 
calculate: function (z) { 
return this.x + this.y + z 

}; 
var b = { 
y: 20, 
__proto__: a 
};

var c = { 
y: 30, 
__proto__: a 
};

// 调用继承方法。

alert(b.calculate(30)); // 60
alert(c.calculate(30)); // 90

原理图如下:

constructor:当定义一个prototype的时候,会构造一个原形对象,这个原型对象存储于构造这个prototype的函数的原形方法之中. 

function Foo(y){ 
this.y = y ; 
}

Foo.prototype.x = 10;

Foo.prototype.calculate = function(z){ 
return this.x+this.y+z; 
};

var b = new Foo(20);

alert(b.calculate(30));

当给foo对象添加了一个prototype属性的时候就会让foo的prototype的constructor指向foo。

参考文档:http://www.jb51.net/article/30750.htm

盗了一张图:原微博链接:http://www.php100.com/html/webkaifa/javascript/2012/1015/11260.html

时间: 2024-10-18 15:37:50

对JavaScript闭包和原型理解的相关文章

javascript闭包的简单理解

奖Javascript闭包前,先给大家讲个小故事 故事背景:刘备和曹操煮酒的时间段,故事可能有点小差异,刘备为曹操手下,关羽为间谍. 咳咳 曹操很想知道手下新来的刘备整天鼓捣啥: 曹操就问刘备,玄德你整天鼓捣啥: 刘备想,我靠这怎么能告诉你,劳资岂不是找死,打个马虎眼就过去了,曹操什么也没问出来: 刘备回到家里,跟关羽说,二弟,哼,曹操那个傻吊,哼! 关羽晚上也回到家里,跟老婆说,哼,大哥那个傻吊,哼!我这就去告诉丞相: 曹操也不能罢休,就去问关羽,关羽正要去告密,就一五一十  ¥%…@?%%:

javascript构造函数.prototype原型理解 函数.call() 方法克隆的理解

直接创建object对象 var stu = new Object(); 或 var stu = {}; stu.name="zhangsan"; stu.age = "18"; stu.fun = function(){ alert("我叫张三"); } 你也可以用讲stu当作一个模块,模块里面有多个对象,如下实例为一个简单的购物车系统的模块!var shoppingCar = {} shoppingCar.carInfo = function

JavaScript闭包的一些理解

简单一点的说:闭包就是能够读取其他函数内部变量的函数.那如何实现读取其它函数内部变量呢,大家都知道在JavaScript中内部函数可以访问其父函数中的变量,那如果将内部函数返回是不是代表能够通过它访问其父函数中的变量了呢,闭包的原理事实上就是这样. 摘录 闭包就是能够读取其他函数内部变量的函数.由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数". 闭包的主要作用: 可以读取函数内部的变量 让函数内部的变量值始终保

javascript闭包的基础理解

关于js的闭包概念,简单说就是读取其他函数内部变量 来看一段代码: function a(){ var n = 0; this.me= function () { n++; console.log(n); }; } var c = new a(); c.me(); c.me(); 输出结果:1,2 这就是闭包最简单的例子,外部函数访问了function a的内部变量n,形成了一个闭包

深入理解javascript闭包

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function

全面理解Javascript闭包和闭包的几种写法及用途

一.什么是闭包和闭包的几种写法和用法                                                       1.什么是闭包 闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点: 1. 作为一个函数变量的一个引用,当函数返回时,其处于激活状态. 2. 一个闭包就是当一个函数返回时,一个没有释放资源的栈区. 简单的说,Javascript允许使用内部函数---即函数定义和函数表

深入理解javascript闭包【整理】

原文链接:http://www.cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html 英文原文:http://www.jibbering.com/faq/faq_notes/closures.html 要成为高级 JavaScript 程序员,就必须理解闭包. 本文结合 ECMA 262 规范详解了闭包的内部工作机制,让 JavaScript 编程人员对闭包的理解从"嵌套的函数"深入到"标识符解析.执行

转 全面理解Javascript闭包和闭包的几种写法及用途

转自:http://www.cnblogs.com/yunfeifei/p/4019504.html 好久没有写博客了,过了一个十一长假都变懒了,今天总算是恢复状态了.好了,进入正题,今天来说一说javascript里面的闭包吧!本篇博客主要讲一些实用的东西,主要将闭包的写法.用法和用途. 一.什么是闭包和闭包的几种写法和用法                                                       1.什么是闭包 闭包,官方对闭包的解释是:一个拥有许多变量和绑

javascript深入理解js闭包(个人理解,大神勿喷)

一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function f1(){ var n=999; } alert(n); // error 这里有一个地方需要注意,函数