文档章节

JavaScript学习笔记(变量和作用域)

lekabeen
 lekabeen
发布于 2017/09/10 09:45
字数 935
阅读 0
收藏 0

1. 基本类型和引用类型的值

        ECMAScript变量包含了两种数据类型的值:基本类型值和引用类型值

基本类型值是简单的数据段,按值访问,可以操作保存在变量中的实际的值,包括:Undefined、Null、Boolean、Number和String

引用类型的值是保存在内存当中的对象。

1.1 动态的属性

        可以为引用类型的值添加、更改和删除属性和方法

var person = new Object();
person.name = "hello";
alert(person.name);   //"hello"

        但是不能为基本类型的值添加属性,虽然不会报错

var name = "hello";
name.age = 27;
alert(name.age);  //undefined

     

1.2 复制变量值

        基本类型值的变量的复制将会为新变量创建一个新值,对变量的操作互不影响

var num1 = 5;
var num2 = num1;

                                                        

        由于引用类型的值是一个指针,指向堆内存中的模块内存对象,引用类型的变量复制的值是指针,所以会指向同一块内存对象,对变量进行属性和方法的操作便会互相影响

                            

1.3 传递参数

        ECMAScript中所有函数的参数都是按值传递的,就像把值从一个变量复制到另一个变量一样,参数在函数内部都会复制给一个局部变量。

        如下代码是基本类型值的参数传递

function addTen(num){
    num += 10;
    return num;
}

var count = 20;
var result = addTen(count);
alert(count);    //20,没有变化
alert(result);   //30

        引用类型的参数传递,引用类型的变量的值只是一个指针,当变量重新赋值后,其值的指针自然指向不同的内存对象,且不会影响原内存对象的其他指针

function setName(obj){
  obj.name = "hello";
  obj = new Object();
  obj.name = "word";
}

var person = new Object();
setName(person);
alert(person.name);    //"hello"

 

1.4 检测类型

        typeof操作符可检测变量的值的类型,对于引用类型的变量会返回”object“

var s = "hello";
var b = true;
bar i = 22;
var u;
var n = null;
var o = new Object();

alert(typeof s);    //string
alert(typeof i);    //number
alert(typeof b);    //boolean
alert(typeof u);    //undefined
alert(typeof n);    //object
alert(typeof o);    //object

        想要检测引用类型的值的具体的类时,可用instanceof操作符,返回true或false

alert(person instanceof Object);  //变量person是Object类返回true,否则返回false
alert(colors instanceof Array);  //变量person是Array类返回true,否则返回false

 

2. 执行环境和作用域

        每个执行环境都会创建一个与之关联的变量对象,全局执行环境是最外围的。每个函数都有自己的执行环境,会创建变量对象的一个作用域链。

var color = "blue";

function changeColor(){
	var anotherColor = "red";
	
	function swapColors(){
		var tempColor = anotherColor;
		anotherColor = color;
		color = tempColor;
		
		//这里可以访问colo、anotherColor和tempColor
	}
	
	//这里可以访问color和anotherColor,但不能访问tempColor
	swapColors();
}

//这里只能访问color
changeColor();

                                                    作用域链图

2.1 延长作用域链

        通过try-catch语句中的catch块和with会创建一个新的变量对象,可延长作用域链

function buildUrl(){
	var qs = "?debug=true";
	
	with(location){
		var url = href + qs;
	}
	
	return url;
}

 

2.2 没有快作用域

        JavaScript中没有块作用域

for(var i=0; i<10; i++){
	doSomething(i);
}
alert(i);  //10

        使用var声明的变量会自动添加到最接近的执行环境中,如果初始化变量时没有用var声明,则会添加到全局环境中

function add(num1, num2){
	sum = num1 + num2;
	return sum;
}
var result = add(10,20); //30
alert(sum);              //30

        变量调用时会从作用域链前段开始找,也就是从最接近的执行环境到最外层的全局环境。

var color  "blue";

function getColor(){
	return color;
}

alert(getColor());  //"blue"
var color  "blue";

function getColor(){
	var color = "red";
	return color;
}

alert(getColor());  //"red"

 

参考文献:    JavaScript高级程序设计(第3版)

© 著作权归作者所有

共有 人打赏支持
lekabeen
粉丝 0
博文 3
码字总数 3679
作品 0
厦门
程序员
私信 提问
《高性能javascript》 笔记

第一部分:关于script 当把js脚本通过script标签放在head中的时候,早期浏览器在遇到script的时候会阻止浏览器加载和渲染html。知道javascript脚本被下载并执行完,且这些javascript是依次下载和...

modernizr
2014/04/03
467
1
JavaScript 面向对象学习——1

公司项目采用Ext,结果本人发现入门不易!尤其是采用JavaScript编写面向对象程序,经常使用jQuery的知道,jQuery是面向函数编程的,所以很容易入门。然而,Ext是面向对象的,那么,当你想要自...

learn_more
2014/11/16
0
0
ES6学习笔记(const和let)

前言:这周工作的中心开始倾向于前端了,自己虽然是个后端工程师,不过最终的期望还是倾向于全栈的,自己今年也有意朝着这个方向去努力,因为公司属于创业公司,如果每个人设计的技术层面会更...

程序员小哥哥
06/23
0
0
JavaScript的变量作用域

在学习JavaScript的变量作用域之前,我们应当明确几点: JavaScript的变量作用域是基于其特有的作用域链的。 JavaScript没有块级作用域。 函数中声明的变量在整个函数中都有定义。 1、JavaS...

biGpython
2011/08/13
0
0
angular js 自学笔记(一)

js中的mvc mvc设计模式,简单说来是将复杂的代码设计规范化,把应用的输入,处理,输出分开,M是指数据模型,V是指用户界面,C则是控制器。像我刚接触的SSH框架中,例如struts,就是利用mvc的...

烽穹寒渊
2015/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

老男孩 - python基础

基础知识 %s 字符串格式输出 ,%d 数字格式化输出 可变类型(mutable):列表,字典,集合 不可变类型(unmutable):数字,字符串,元组 列表 基础 l = []l =[‘张三‘,‘李四’,'alex']...

以谁为师
7分钟前
0
0
【Keras】减少过拟合的秘诀——Dropout正则化

Dropout正则化是最简单的神经网络正则化方法。其原理非常简单粗暴:任意丢弃神经网络层中的输入,该层可以是数据样本中的输入变量或来自先前层的激活。它能够模拟具有大量不同网络结构的神经...

阿里云官方博客
8分钟前
0
0
使用openoffice实现文档在线预览

下载地址:http://www.openoffice.org/zh-cn/download/ 安装 wget https://jaist.dl.sourceforge.net/project/openofficeorg.mirror/4.1.6/binaries/zh-CN/Apache_OpenOffice_4.1.6_Linux_x8......

果树啊
13分钟前
0
0
微信小程序 用canvas绘制的图插入到分享中

用canvas绘制图 createNewImg: function () {var that = this;var ctx = wx.createCanvasContext('mycanvas');ctx.setFillStyle("#F4F4F4");// context.setFillStyle("#fff")ctx.fillRe......

潇潇程序缘
20分钟前
1
0
公司报表数据库优化

报表系统优化 背景: 11.22早晨 刚放下背包,收到一份邮件,邮件意思是公司报表数据库慢,让我帮忙看看。邮件还附带了一个SQL文本,指出这个SQL慢。随后电话了开发人员了解事情来龙去脉,原来...

hnairdb
20分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部