javascript作用域、闭包、对象与原型链
原文作者总结得特别好,自己收藏一下。^-^
1.作用域
1.1函数作用域
JS的在函数中定义的局部变量只对这个函数内部可见,称之谓函数作用域。它没有块级作用域(因此if、for等语句中的花括号不是独立作用域)
var value = 'global';
var f1 = function(){
console.log(v1); //global
};
f1();
var f2 = function(){
var v1 ='local';
console.log(v1); //local
};
f2();
嵌套作用域变量的查找规则:
当前函数中引用一个变量时,js会搜索当前函数作用域,如果没找到则搜索其上层作用域,直至全局作用域。
var v1 = 'global';
var f1 = function(){
console.log(v1);
}
f1(); //global
var f2 = function(){
var v1 = 'local';
f1();
};
f2(); //global
词法作用域规则:
函数的嵌套关系是定义时决定的,而非调用时决定的,即语法作用域,即嵌套关系是由词法分析时确定的,而非运行时决定。
var v1 = 'global';
var f = function(){
console.log(v1); //undefined
var v1 = 'local';
};
因此,根据这两个规则的相互作用,函数内无论什么位置定义的局部变量,在进入函数时都是已经定义的,但未初始化,即为undefined,直到运行到变量被赋值时才被初始化,因此若是访问了未初始化的变量,我们会得到undefined的说明。
1.2全局作用域
全局作用域的变量时全局对象的属性,不论什么函数中都可以直接访问,而不需要通过全局对象,但加上全局对象,可以提高搜索效率。
满足下列条件的变量属于全局作用域:
在最外层定义的变量、全局对象的属性、任何地方隐匿定义的变量。
2.闭包
2.1装饰的定义
function f1(){
//context define
function f2(){
//func define
};
return f2;
};
f2(); //获得f1中的context
在类似C/C++这种的非函数式编程语言中,我们也可以定义函数指针并返回,但外层函数在执行结束后为内层函数定义的上下文信息会被销毁,而在闭包中,则保存了返回的函数,还包含返回函数的上下文信息。(由词法作用域所支持)而且在返回闭包之后,上下文信息即被单独创建出来,从而可以生成多个互相独立的闭包实例。
2.2闭包的用途
闭包有两个用途,一是实现嵌套的回调函数,二是隐藏对象的细节。
对于前者,NodeJS的编程风格已经可以说明问题,对于后者,函数内部的局部变量外部是不可见的,但可以提供访问函数来访问和修改相应的局部变量,从而实现OO封装的意图。
3.对象
在基于类型的语言中,对象是由类实例化,而JS是基于原型的系统,对象是由原型复制生成的。
3.1 对象的创建与访问
JavaScript中的Object实际上就是一个由属性组成的关联数组,属性由名称和值组成。可以由new Object()或{}来创建对象。对于创建简单对象,可以使用对象初始化器来创建对象,即由{}字面值来创建对象,对象的属性名可以为加''的字符串,也可不加引号。这对JS来说没有区别,访问对象的属性时,可以使用句点也可使用关联数组['name'],后者的好处是当我们不知道对象属性名时,可以由变量来作为关联数组的索引。
3.2 构造函数
我们也可以通过自定义构造函数来生成对象,从而能实例化更多的对象。构造函数也是函数,我们需要用大写的函数名即可。在函数中可以定义成员变量,成员函数等。
3.3 上下文对象
在JS中,上下文对象即this指针,即被调用函数所处的环境。其作用是在函数内部引用到调用它的对象本身。this的出现会之前介绍的静态作用域产生影响,加入了动态的内容。
由例子可以看到,我们可以通过不同的变量引用函数,不同之处调用上下文。
传递与绑定上下文
JavaScript的函数可以通过Call和Apply来动态绑定到特定的上下文。
如果想永久的绑定上下文,可以使用bind函数,需要注意的是同一函数上的多次bind是没有效果的。
var person = {
name:'noname',
getName:function(){console.log(this.name); }
};
var bill = {name:'Bill'};
person.getName(); //noname
bill.getName = person.getName;
bill.getName(); //Bill
name = 'JavaScript';
func = person.getName;
func(); //JavaScript
3.4 原型
创建对象时,我们应该在构造函数内定义一般成员,而是其原型定义成员函数。
下面我们会主要介绍[原型链]
JS中有两个特殊的对象:Object与Function,它们都是构造函数,用于生成对象。
Object.prototype是所有对象的祖先,Function.prototype是所有函数的原型,包括构造函数。
可以将JS的对象分为三类:用户创建对象,构造函数对象,原型对象。
所有对象中都有一个__proto__属性,其指向此对象的原型。
构造函数对象有prototype,指向其原型对象,通过此构造函数创建对象时,新创建对象的__proto__属性将会指向构造函数的prototype属性。
原型对象有一个constructor属性,指向它对应的构造函数。
function Foo() {}
var obj = new Object();
var foo = new Foo();

原文地址:http://blog.csdn.net/zzulp/article/details/8144520
javascript作用域、闭包、对象与原型链的更多相关文章
- JavaScript高级内容笔记:原型链、继承、执行上下文、作用域链、闭包
最近在系统的学习JS深层次内容,并稍微整理了一下,作为备忘和后期复习,这里分享给大家,希望对大家有所帮助.如有错误请留言指正,tks. 了解这些问题,我先一步步来看,先从稍微浅显内容说起,然后引出这些 ...
- 1--面试总结-js深入理解,对象,原型链,构造函数,执行上下文堆栈,执行上下文,变量对象,活动对象,作用域链,闭包,This
参考一手资料:http://dmitrysoshnikov.com/ecmascript/javascript-the-core/中文翻译版本:https://zhuanlan.zhihu.com/p ...
- javascript中的对象,原型,原型链和面向对象
一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...
- javascript原型对象与原型链
在javascript中,当系统加载构造函授后 ,会自动在内存中增加一个对象,这个对象就是原型对象.构造函数和原型对象在内存中表现为相互独立,但两者之间还存在联系,构造函数的prototype是原型对 ...
- 三张图较为好理解JavaScript的原型对象与原型链
最近从网上看到别人详细得讲解了js的原型对象和原型链,看完感觉是看得最清晰的一个,于是,摘录到自己博客里 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与_ ...
- 【javascript】对原型对象、原型链的理解
原型对象,原型链这些知识属于基础类知识.但是平时开发过程中也很少用到. 看网上的意思,原型链用于es5开发场景下的继承.es6有了类语法糖之后,就自带继承了. 通过理解,个人画了一张原型链解构的关系图 ...
- JavaScript 变量、函数与原型链
定义 || 赋值 1-函数的定义 函数定义的两种方式: “定义式”函数:function fn(){ alert("哟,哟!"); } “赋值式”函数:var fn = funct ...
- JavaScript的面向对象原理之原型链详解
一.引言 在16年的10月份,在校内双选会找前端实习的时候,hr问了一个问题:JavaScript的面向对象理解吗?我张口就说“JavaScript是基于原型的!”.然后就没什么好说的了,hr可能不知 ...
- 深入理解JS对象和原型链
函数在整个js中是最复杂也是最重要的知识 一个函数中存在多面性: 1.它本身就是一个普通的函数,执行的时候形成的私有作用域(闭包),形参赋值,预解释,代码执行,执行完 成后栈内存销毁/不销毁. 2.& ...
- JavaScript的面向对象原理之原型链
二.JavaScript的对象 为了能够清楚的解释这一切,我先从对象讲起.从其他面向对象语言(如Java)而来的人可能认为在JS里的对象也是由类来实例化出来的,并且是由属性和方法组成的. 实际上在JS ...
随机推荐
- P4306 [JSOI2010]连通数
思路 要求求每个点能到达的点数就是传递闭包 然后n^3Floyd可做,但是n=2000,然后bitset压位 复杂度\(O(\frac{n^3}{32})\),能过 代码 #include <c ...
- p3396 哈希冲突(暴力)
想了好久,没想到优秀的解法,结果是个暴力大吃一静.jpg 分类讨论,预处理\(p\le \sqrt{n}\) 的情况,其他直接暴力,复杂度\(O(n \sqrt{n} )\) #include < ...
- 【BZOJ】3295: [Cqoi2011]动态逆序对
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3295 mamaya,弱鸡xrdog终于会写树套树啦.... 将树状数组中每一个节点看成一棵 ...
- 实体entity、JavaBean、Model、POJO、domain的区别
实体entity.JavaBean.Model.POJO.domain的区别Java Bean.POJO. Entity. VO , 其实都是java 对象,只不过用于不同场合罢了. 按照 Sprin ...
- springmvc源码解析(二)
架构流程: 1. 用户发送请求至前端控制器DispatcherServlet, 2. DispatcherServlet收到请求调用HandlerMapping处理器映射器. 处理器映射器根据请 ...
- Python 3种运行方式
Python 命令行 >>>print('Hello World!') 小程序 在hello.py中写入如下,并保存: print('Hello World!') $python h ...
- Oracle(限定查询1)
3.1.认识限定查询 例如:如果一张表中有100w条数据,一旦执行了“SELECT * FROM 表”语句之后,则将在屏幕上显示表中的全部数据行的记录,这样即不方便浏览,也有可能造成死机的问题出现,所 ...
- python调用虹软2.0
第一版踩了无数的坑,终于第二版把坑全添了,这次更新可以正常获取人脸数,角度,代码可读性更高,继续更新中 第三版已发出 https://www.cnblogs.com/wxt51/p/10125460. ...
- 使用http://start.spring.io/ 生成工程
今天学习spring-cloud,无意中发现一个spring提供的构建工程的页面,想记录下,发现有个博客写的很好就直接抄过来了. 原文链接: https://blog.csdn.net/u01050 ...
- JavaWeb知识点总结
>一: 创建Web项目项目说明:1.java Resources:java源文件2.WebContent:网页内容html.css.js.jsp.资源.配置文件等 HTML:Hyper Text ...