Javascript(四):作用域、JS预解析、对象

文章目录

  • 作用域
    • 1.作用域概述
    • 2.全局变量和局部变量
    • 3.作用域链
  • 预解析
  • 对象
    • 1.什么是对象
    • 2.为什么需要对象
    • 3.创建对象
      • 3.1利用字面量创建对象
      • 3.2创建对象的三种方式
      • 3.利用构造函数创建对象
    • 4.构造函数和对象
    • 5.new关键字
    • 6.遍历对象
    • 7.小结

作用域

1.作用域概述

通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这
个名字的作用域。作用域的使用提高程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。

1.JavaScript作用域:就是代码名字(变量)在某个范围内起作用和效果目的是为了提高程序的可靠性更
重要的是减少命名冲突

2.js的作用域(es6)之前:全局作用域局部作用域

3.全局作用域:整个script标签或者是一个单独的js文件

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

2.全局变量和局部变量

变量的作用域:根据作用域的不同我们变量分为全局变量和局部变量

1.全局变量:在全局作用域下的变量在全局下都可以使用

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

2.局部变量在局部作用域下的变量后者在函数内部的变量就是局部变量

注意:函数的形参也可以看做是局部变量

区别:

全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存

局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间

3.作用域链

·只要是代码,就至少有一个作用域
·写在函数内部的局部作用域
·如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域

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

预解析

JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步:预解析和代码执行。

1.我们js引擎运行js分为两步:预解析代码执行
(1)预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面
(2)代码执行 按照代码书写的顺序从上往下执行

2.预解析分为变量预解析(变量提升)和函数预解析(函数提升)
(1)变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
(2)函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数

案例:

f1();
console.log(c);
console.log(b);
console.log(a);
function f1(){
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);

相当于以下代码:
function f1(){
    var a,b,c;
	//相当于var a = 9;b = 9;c = 9; b和c直接赋值,没有var声明,当全部变量看
    //集体生声明 var a = 9,b = 9,c = 9
    consolo.log(a)		//9
    consolo.log(b)		//9
    consolo.log(b)		//9
}
f1();
consolo.log(c)	//9
consolo.log(b)	//9
consolo.log(a)	//报错

对象

1.什么是对象

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

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

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

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

2.为什么需要对象

保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。如果要保存一个人的完整信息呢?
例如,将“张三疯”的个人的信息保存在数组中的方式为:

var arr=[张三疯','男',128,154];

JS中的对象表达结构更清晰,更强大。张三疯的个人信息在对象中的表达结构如下:

张三疯.姓名='张三疯';person.name=张三疯';
张三疯.性别='男';person.sex='男';
张三疯.年龄=128;person.age=128;
张三疯.身高=154;person.height=154;

3.创建对象

在JavaScript中,现阶段我们可以采用三种方式创建对象(object):
·利用字面量创建对象
·利用new Object创建对象
·利用构造函数创建对象

3.1利用字面量创建对象

对象字面量:就是花括号()里面包含了表达这个具体事物(对象)的属性和方法。
()里面采取键值对的形式表示
·键:相当于属性名
·值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)

var star = {
	name : ' pink ' ,
	age:18,
	sex:'男',
	sayHi:function(){
		alert('大家好啊~');
    }
};

对象的调用
①对象里面的属性调用:对象.属性名,这个小点.就理解为“的”
②对象里面属性的另一种调用方式:对象[‘属性名’],注意方括号里面的属性必须加引号,我们后面会用

3.2创建对象的三种方式

1.变量、属性、函数、方法总结
①变量:单独声明赋值,单独存在

②属性:对象里面的变量称为属性,不需要声明,用来描述该对象的特征

③函数:单独存在的,通过“函数名0”的方式就可以调用

④方法:对象里面的函数称为方法,方法不需要声明,使用“对象方法名0”的方式就可以调用,方法用来描述该对象
的行为和功能。

2.利用new Object创建对象

跟我们前面学的 new Array()原理一致

var obj=new Object();{//创建了一个空的对象
    obj.uname='张三疯';
    obj.age=18;
    obj.sex='男';
    obj.sayHi=function(){
        console.log('hi~');
    }
}
//(1)我们是利用等号= 赋值的方法添加对象的属性和方法
//(2)每个属性和方法之间用分号结束

3.利用构造函数创建对象

1.为什么要利用构造函数创建对象

因为我们一次创建一个对象,里面很多的属性和方法是大量相同的 我们只能复制
因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数
又因为这个函数不一样,里面封装的不是普通代码,而是对象
构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

2.构造函数创建对象

构造函数:是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与new运算符一起
使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。

构造函数的语法格式
function 构造函数名(){
    this.属性=值;
    this.方法=function(){}
}
new 构造函数名();

注:

1.构造函数名字首字母要大写
2.我们构造函数不需要return就可以返回结果
3.我们调用构造函数 必须使用 new
4.我们只要new Star()调用函数就创建一个对象 ldh {}

4.构造函数和对象

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

·创建对象,如new Stars(),特指某一个,通过new关键字创建对象的过程我们也称为对象实例化

5.new关键字

new在执行时会做四件事情:
1.在内存中创建一个新的空对象。
2.让this指向这个新的对象。
3.执行构造函数里面的代码,给这个新对象添加属性和方法。
4.返回这个新对象(所以构造函数里面不需要return)。

6.遍历对象

for…in 语句用于对数组或者对象的属性进行循环操作。

var obj = {
    name:'pink老师',
    age : 18 ,
    sex:'男'
}
/*consble.log(obj.name);
console.log(obj.age);
console.log(obj.sex);*/
//for in 遍历我们的对象
//for(变量in 对象){
//}
for(var k in obj){
    console.log(k);//k 变量 输出 得到的是 属性名
    console.log(obj[k]);//obj[k] 得到是 属性值
}
//我们使用 for in 里面的变量 我们喜欢写 k 或者 key

7.小结

1.对象可以让代码结构更清晰
2.对象复杂数据类型object。
3.本质:对象就是一组无序的相关属性和方法的集合。
4.构造函数泛指某一大类,比如苹果,不管是红色苹果还是绿色苹果,都统称为苹果。
5.对象实例特指一个事物,比如这个苹果、正在给你们讲课的pink老师等。
6.for.in语句用于对对象的属性进行循环操作。

你可能感兴趣的:(Javascript,javascript,开发语言)