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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
悬浮数字的实现案例
Feb 19 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 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新手上路(五)
2006/10/09 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Python实现自动发送邮件功能
2021/03/02 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
Python基础教程之异常详解
2019/01/10 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
如何通过python实现全排列
2020/02/11 Python
python TCP包注入方式
2020/05/05 Python
python 爬取小说并下载的示例
2020/12/07 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
防火标语大全
2014/10/06 职场文书
电影建国大业观后感
2015/06/01 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
美元符号 $
2022/02/17 杂记
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL
Win11更新失败并提示0xc1900101
2022/04/19 数码科技