最近在学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。

也就是说 Foo.prototype.constructor=Foo //ture

总之js中继承用_proto_来实现。

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

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

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

  1. JavaScript闭包的一些理解

    原文:JavaScript闭包的一些理解 简单一点的说:闭包就是能够读取其他函数内部变量的函数.那如何实现读取其它函数内部变量呢,大家都知道在JavaScript中内部函数可以访问其父函数中的变量,那 ...

  2. 《深入理解JavaScript闭包和原型》笔记

    By XFE-堪玉 以下知识来源于对王福朋所写<深入理解javascript原型和闭包>的理解和整理 一切都是对象[引用类型],对象都是通过函数创建的[Funcion类型] 对象是属性的集 ...

  3. 我也谈javascript闭包的原理理解

    参考原文:http://www.oschina.net/question/28_41112 前言:还是一篇入门文章.Javascript中有几个非常重要的语言特性——对象.原型继承.闭包.其中闭包 对 ...

  4. javascript 闭包最简单理解

    首先说3点与闭包有关系的东西. 一.变量的作用域 变量的作用域不难理解. 1.函数内部可以访问函数外部的变量,而函数外部不能访问函数内部的变量. 2.如果在函数内定义变量的时候,不加var,那么是全局 ...

  5. JavaScript 闭包(个人理解)

    当function里嵌套function时,内部的function可以访问外部function里的变量.但这不是闭包 function foo(x) { var tmp = 3; function b ...

  6. JavaScript闭包函数的理解

    闭包就是一个函数能够访问其函数外部作用域中的变量,即在外面可以调用函数中的函数的变量,其实他就是将函数内外部连接起来的桥梁 闭包三大特点: 1. 函数嵌套函数 2. 内部函数可以访问外部函数的变量 3 ...

  7. javascript中的原型理解总结

    经过几天研究查找资料,对原型终于有点理解了,今天就做下总结,不对之处,希望各位能够提出. 1.每一个Javascript对象(null除外)都和另一个对象相关联,“另一个”对象就是我们今天所要总结的原 ...

  8. JavaScript闭包的深入理解

    闭包算是javascript中一个比较难理解的概念,想要深入理解闭包的原理,首先需要搞清楚其他几个概念: 一.栈内存和堆内存 学过C/C++的同学可能知道,计算机系统将内存分为栈和堆两部分(大学的基础 ...

  9. JAVASCRIPT闭包以及原型链

    方法内部还有个方法,实例化父方法后,再次调用父方法,可以运行父方法内部的子方法,这样的程序就叫做闭包 DEMO如下: //function outerFn() { // var outerVar = ...

随机推荐

  1. 【JSTREE】 复选框默认选中【总结】

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  2. 高性能MySQL(五):查询性能优化

    当向MySQL 发送一个请求的时候MySQL 到底做了什么? 1.客户端发送一条查询给服务器 2.服务器先检查查询缓存,如果命中了缓存,则立即返回存储在缓存中的结果.否则进入下一阶段 3.服务器端进行 ...

  3. Content-disposition

    今天查看Struts2的文件上传部分 发现有个例子开头打印的信息中有Content-Disposition,一时好奇,所以了解了一下.顺便学习一下文件上传所需要的注意事项. Content-dispo ...

  4. IDEA tomcat乱码

    在运行/调试 配置对话框的Startup/Connection面板中, 勾选Pass environment variables. 并添加一个environment variable, Name填 J ...

  5. angularjs 设置全局变量的3种方法

    angularjs自身有二种,设置全局变量的方法,在加上js的设置全局变量的方法,总共有三种.要实现的功能是,在ng-app中定义的全局变量,在不同的ng-controller里都可以使用. 1,通过 ...

  6. PHP单例模式

    //1.单例模式//目的:为了控制对象的数量(只能够有一个,相当于类的计划生育)//做法//1.将类的构造函数做成私有的//2.在类里面做了一个公有的函数来造对象//3.将该函数变为静态的//4.在函 ...

  7. JS WEB 交互问题

    1 webView----->js #import "ViewController.h" @interface ViewController () @property (no ...

  8. iOS 数据存储规则

    概观 iCloud的备份包括,它可以自动每天通过Wi-Fi备份用户的iOS设备.在您的应用程序的主目录都被备份,唯一的例外是应用程序本身捆绑,缓存目录和temp目录.购买的音乐,应用程序,电子书,相机 ...

  9. MapReduce工作原理图文详解

    目录:1.MapReduce作业运行流程2.Map.Reduce任务中Shuffle和排序的过程 1.MapReduce作业运行流程 流程示意图: 流程分析: 1.在客户端启动一个作业. 2.向Job ...

  10. html表单提交方式

    xml 表单提交方式: * 使用submit提交 <form> 要提交的数据 <input type="submit" /'> </form> ...