web前端开发之JavaScript：作用域与对象的那些事

今天来讲讲作用域和对象的那些事，了解作用域对我们书写代码变量有很大帮助，避免踩坑；对象在js中经常会使用到，学好对象的创建和使用也是我们必不可少的。

作用域

通常来说, 一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。简单来说，就是代码名字在某个范围内起作用和效果，目的是为了提高程序的可靠性，更重要的是减少命名冲突

作用域又分为全局作用域和局部作用域，

全局作用域

整个script 或者单独的js文件，例如 ：

<script>
    var a =6;
    document.write(a);
/script>

局部作用域

在函数内部就是局部作用域这个代码的名字只在函数内部起效果和作用

例如：

function myFunction(num1,num2) {
   return num1 +num2;
}

在不同作用域下，变量的值会受一定影响。例：

<script>
    var a =6;
    document.write(a);
    function myFunction() {
  var a=10;
   document.write(a);
}
myFunction();
/script>

结果为6 10；

根据作用域的不同，变量又可以分为局部变量和全局变量。顾名思义，局部变量就是在局部作用域下的变量，全局变量就是在全局作用域下的变量。

注意：如果在函数内部没有声明直接赋值的变量也属于全局变量

作用域链

内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值这种结构我们称为作用域链，采用就近原则

<script> 
    var num = 10;
function fn() { //外部函数
    var num = 20;
    function fun() { //内部函数
    console .1og(num);
    }

}
</script> 
//根据就近原则，结果为20

解决这类问题，我们还可以通过作用域链画图解决

function f1() {
var num = 123;
function f2() {
console.log( num ) ;
}
f2();
}
var num = 456;
f1(); //结果为123

对象

现实生活中:万物皆对象,对象是一个具体的事物 ,看得见摸得着的实物。例如,具体的一本书，一辆汽车、一个人，可以是“对象”,一个数据库、一张网页、 一个与远程服务器的连接也可以是“对象”。

在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。

对象是由属性和方法组成的。

●属性:事物的特征,在对象中用属性来示(常用名词)

●方法:事物的行为,在对象中用方法来表示(常用动词)

JS中的对象表达结构更清晰,更强大。例如我们介绍一个人时，用对象的形式可以这么表达。

yushen.age = 18;
yushen.height = 175;
.yushen.sex = '男';

创建对象

在JavaScript中,现阶段我们可以采用三种方式创建对象( object) : 

●利用字面量创建对象

对象字面量:就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法。

//利用对象字面量创建对象{}
//varobj={};//创建了一个空的对象
varobj={
uname: '宇神',
age: 18,
sex:'男'，
sayHi: function() {
console.1og('hi~');
}
}
console.log(obj.uname );
obj.sayHi();

 (1) 里面的属性或者 方法我们采取键值对的形式键属性名 :

值属性值

(2)多个属性或者方法中间用逗号隔开的

（3)方法冒号后面跟的是一个匿名函数

调用对象

(1). 调用对象的属性 我们采取对象名.属性名.我们理解为 的

console . log(obj . uname );

(2).调用属性还有一种方法对象名['属性名']

console . log(obj['age ']);

(3) 调用对象的方法sayHi

对象名.方法名()千万别忘记添加小括号

●利用new Object创建对象

var obj = new Object(); //创建了一个空的对象
obj.uname = '宇神' ;
obj.age = 18;
obj.sex ='男';
obj.sayHi = function() {
console.log('hi~' );

我们是利用等号=赋值的方法添加对象的属性和方法

每个属性和方法之间用分号结束

●利用构造函数创建对象

构造函数: 是一种特殊的函数,主要用来初始化对象,即为对象成员量赋初始值,它总与new运算符-起

使用。我们可以把对象中一些公共的属性和方法抽取出来 ,然后封装到这个函数里面。

 构造函 数的语法格式

function构造函数名() {

this.属性=值;

this.方法= function() {}

}

new 构造函数名()；//调用函数

注意：

1.构造函数名字首字母要大写

2.我们构造函数不需要return就可以返回结果

3.我们调用构造函数必须使用new

构造函数与创建对象的区别

构造函数,如Stars0 ,抽象了对象的公共部分,封装到了函数里面,它泛指某-大类( class )

创建对象,如new Stars0 ,特指某-个,通过new关键字创建对象的过程我们也称为对象实例化

遍历对象

//遍历对象
varobj={
name :’张宇老师',
age: 18,
sex:'男'，
// console. 1og(obj . name);
// console . log(obj. age);
// console. log(obj.sex);
//forin遍历我们的对象
//for(变量in对象){
// }
for (var k in obj) {
console.log(k); //k变量输出
得到的是属性名
console. log(obj[k]); // obj[k]得到是属性值

小结：

1.对象可以让代码结构更清晰

2.对象是复杂数据类型object.

3.本质:对象就是一组无序的相关属性和方法的集合。

4.构造函数泛指某一大类 ,比如苹果,不管是红色苹果还是绿色苹果,都统称为苹果。

5.对象实例特指一个事物,比如这个苹果、正在给你们讲课的张宇老师等。

6. for..in语句用于对对象的属性进行循环操作。

每篇一句：大道至简，知易行难。从今天开始改变，这是对平庸生活最好的回击。

下次再会！