JavaScript作用域、闭包、对象与原型链概念及用法实例总结


Posted in Javascript onAugust 20, 2018

本文实例讲述了JavaScript作用域、闭包、对象与原型链概念及用法。分享给大家供大家参考,具体如下:

1 JavaScript变量作用域

1.1 函数作用域

没有块作用域:即作用域不是以{}包围的,其作用域完成由函数来决定,因而if /for等语句中的花括号不是独立的作用域。

如前述,JS的在函数中定义的局部变量只对这个函数内部可见,称之谓函数作用域。

嵌套作用域变量搜索规则:当在函数中引用一个变量时,JS会搜索当前函数作用域,如果没有找到则搜索其上层作用域,一直到全局作用域。

var value = 'global';
var f1 = function(){
 console.log(v1); //global
};
f1();
var f2 = function(){
 var v1 ='local';
 console.log(v1); //local
};
f2();

词法作用域规则:函数的嵌套关系是定义时决定的,而非调用时决定的,即词法作用域,即嵌套关系是由词法分析时确定的,而非运行时决定。

var v1 = 'global';
var f1 = function(){
 console.log(v1);
}
f1(); //global
var f2 = function(){
 var v1 = 'local';
 f1();
};
f2(); //global

对于这两个规则的相互作用,函数内无论什么位置定义的局部变量,在进入函数时都是已经定义的,但未初始化,即为undefined,直到运行到变量被赋值时才被初始化,因此若访问了未初始化的变量,我们会得到undefined的说明。

var v1 = 'global';
var f = function(){
 console.log(v1); //undefined
 var v1 = 'local';
};

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的函数可以通过CallApply来动态绑定到特定的上下文。

如果想永久的绑定上下文,可以使用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();

JavaScript作用域、闭包、对象与原型链概念及用法实例总结

参考文献:《Node.JS开发指南》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 Javascript
Rust中的Struct使用示例详解
Aug 14 Javascript
RequireJS用法简单示例
Aug 20 #Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 #Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 #Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 #Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 #Javascript
获取layer.open弹出层的返回值方法
Aug 20 #Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 #Javascript
You might like
判断PHP数组是否为空的代码
2011/09/08 PHP
微信API接口大全
2015/04/15 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
详解Python import方法引入模块的实例
2017/08/02 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
python查看列的唯一值方法
2018/07/17 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
python的pstuil模块使用方法总结
2019/07/26 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Python for循环及基础用法详解
2019/11/08 Python
keras slice layer 层实现方式
2020/06/11 Python
python怎么判断模块安装完成
2020/06/19 Python
.NET程序员的几道面试题
2012/06/01 面试题
晚会邀请函范文
2014/01/24 职场文书
文明家庭先进事迹材
2014/01/27 职场文书
园艺师求职信
2014/03/10 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
2016七夕情人节感言
2015/12/09 职场文书
MySQL分区表实现按月份归类
2021/11/01 MySQL
python_tkinter事件类型详情
2022/03/20 Python
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js
MySQL批量更新不同表中的数据
2022/05/11 MySQL
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server