前端学习记录27-JavaScript-作用域、预解析、自定义对象

作用域
- 全局作用域
- 局部作用域(函数作用域)
- 变量作用域
- - 全局变量
  - 局部变量
作用域链
预解析
- 变量预解析
- 函数预解析
预解析经典面试题
对象
创建自定义对象的三种方式
- 字面量创建对象
- 利用 new Object 创建对象
- 利用构造函数创建对象
- new关键字
遍历对象
变量、属性、函数、方法的区别
- 变量和属性
- 函数和方法

作用域

(变量)
通常来说，一段代码所用到的名字并不是总有效可用
限定这个名字的可用性代码范围就是这个名字的作用域
提高了程序逻辑的局限性，增强程序可靠性，减少名字冲突

js作用域(es6前)

全局作用域

整个script标签或者是一个单独的js文件

局部作用域(函数作用域)

在函数内部就是局部作用域代码只在函数内部起作用
同一个作用域下相同名字有冲突不同作用域没冲突

变量作用域

js中根据作用域不同变量分为两种

全局变量

在全局作用域下的变量
全局任何位置都可以使用

局部变量

在局部作用域下的变量
只能在对应的局部作用域下使用

特殊情况:不声明的变量也属于全局变量
特殊情况:函数的形参也可以看作为局部变量

从执行效率来看全局变量和局部变量

全局变量只有浏览器关闭的时候才会销毁，比较占内存

局部变量当程序执行完毕就会销毁，比较节约资源

js在es6才有块级作用域，es5中没有
块级作用域{}

if{//此处的变量为 应该为局部变量 但是es5中此处为全局变量
}

作用域链

只要是代码就有作用域

如果函数中还有函数在这个作用域中产生了新的作用域

内部函数可以访问外部函数的变量
用链式方式查找决定变量的值为多少访问方法为
一步一步向上级查找一旦在某父级层查找到则停止继续查找 (undefined也算值)

这种行为叫作用域链

预解析

js代码是通过js引擎来执行的
js在运行代码的时候是先预解析再执行代码

js引擎会把js里面所有 var 和 function 提升到当前作用域的最前面

然后执行代码根据书写顺序从上到下执行

预解析分为变量预解析(变量提升) 和函数预解析(函数提升)

变量预解析

就是把所有的变量声明提升到当前的作用域最前面 (包括任何作用域全局和局部)
只提升变量声明不提升赋值

例如

 console.log(num); //返回 undefinedvar num = 10;预解析后的 代码实际执行为var num;//num 为 undefinedconsole.log(num);num=10;所以num返回值 为 undefined

再例如

 fun(); //报错var fun = function() {console.log(22);}预解析后 代码实际执行为var fun;fun();//报错 没有定义函数fun=function(){console.log(22);}//这会才定义 所以 显示没定义

函数预解析

把所有的函数声明提升到当前作用域最前面不调用函数 (包括任何作用域全局和局部)

例如：

 fn();function fn() {console.log(11);}这段代码的实际 执行时的顺序是function fn() {console.log(11);}fn();所以通过 function 定义的函数 调用写前头写后头都能调用 而使用var声明的函数不行

预解析经典面试题

 f1();console.log(c);console.log(b);console.log(a);function f1(){var a=b=c=9;// 此代码 相当于 var a=9;b=9;c=9;//并不等同于 集体声明 var a=9,b=9,c=9;console.log(a);console.log(b);console.log(c);}

因为 var a=b=c=9; 所以这段代码除了全局作用域中的 console.log(a);报错之外剩下的都是9

对象

对象：一个具体的事物例如一个数据库，一个网页

在js中对象是一组无序的相关属性和方法的集合例如字符串、数值、数组、函数都是对象

事物的特征，在对象中用属性来表示(名词)
事物的行为，在对象中用方法来表示(动词)

为啥需要对象
保存一个值可以用变量
保存多个值可以用数组

保存一个人的完整信息则需要对象
用数组保存会造成信息不对称的问题(例如 135 123 你未必知道这俩表示的是啥)
使用对象的好处就是可完整清晰的表示成 person.name=‘你猜’; person.sex=‘你猜’;

创建自定义对象的三种方式

字面量创建对象

{} 就是对象的字面量

var obj = {}; //创建了一个空的对象

var obj = {username: '你猜',sex: '男',age: 18,saylove: function() {console.log('我爱你');}
}
console.log(obj.username);
console.log(obj['age']);
obj.saylove();

里面的属性和方法采取键值对的形式

键属性名: 值属性值
多个属性或方法用,隔开

方法冒号后跟的是匿名函数

使用对象
调用对象的属性
1.对象名.属性名
2.对象名['属性名']

调用对象的方法
对象名.方法名() 方法名大多数是函数所以需要()

利用 new Object 创建对象

var obj2 = new Object(); //创建了一个空的对象
obj2.username = '我爱你';
obj2.age = 18;
obj2.sex = '男';
obj2.saylove = function() {console.log('我爱你');
}

利用 = 赋值的方法给对象条件属性和方法
每个属性和方法之间;结束

利用构造函数创建对象

一次创建一个对象里面很多属性和方法是相同的只能一个一个复制
但是可以利用函数重复这些相同的代码这个函数就称为构造函数

构造函数中封装的是对象
构造函数首字母大写普通函数不用(行规，你不写也行)
构造函数不需要 return 并且返回的是对象

调用构造函数必须使用 new
属性和方法之前必须有 this

创建:

function 构造函数名() {this.属性 = 值;this.方法 = function() {}
}

调用:

new 构造函数名();

对象是一个具体的事物特指一个
构造函数是泛指的某一大类类似java 的类
利用构造函数创建对象的过程也叫对象的实例化

//例如 学生都有 名字 年龄 性别 写作业
function Student(stu_name, stu_age, stu_sex) {this.name = stu_name;this.age = stu_age;this.sex = stu_sex;this.do_homework = function(homework) {return homework;}
}
var stu_01 = new Student('学生一号', 18, '男');
var stu_02 = new Student('学生二号', 19, '女');
console.log(typeof stu_01);
console.log(stu_01.name);
console.log(stu_01.age);
console.log(stu_01.sex);
console.log(stu_01.do_homework('数学'));
console.log(stu_02.name);
console.log(stu_02.age);
console.log(stu_02.sex);

new关键字

new关键字执行过程
1.new 构造函数在内存中创建一个空的对象
2.this 就会指向刚才创建的空对象
3.执行构造函数中的代码给空对象添加属性和方法
4.返回这个对象

遍历对象

for..in 循环可以遍历数组和对象但是最好是给对象用数组就用普通的for

for(变量 in 对象){}
如果输出k 则返回对象的属性名
如果输出对象名[K] 则返回的是对象的属性值

变量名一般用 k或key
并且输出属性值的语句不是调用对象的 对象名['变量'] 这里是 对象名[变量] 没有引号

var obj = {username: '我爱你',age: 18,sex: '你猜'
}
for (var k in obj) {console.log(k); //如果输出的是变量 得到是属性名console.log(obj[k]); //如果输出的是 对象名[变量] 得到的就是属性值
}

变量、属性、函数、方法的区别

变量和属性

相同点: 都用来保存数据

不同点：
变量是单独声明并赋值使用时也是单独使用单独存在

属性在对象中不需要声明使用时必须调用对象寄托对象

函数和方法

相同点：都用来实现某种功能

不同点:
函数是单独声明调用的时候单独使用单独存在

方法在对象中调用时必须调用对象中的方法寄托对象

前端学习记录27-JavaScript-(作用域、预解析、自定义对象)相关推荐

前端学习（759）：预解析案例
前端学习（758）：预解析二
前端学习（757）：预解析
【07】JavaScript：05-作用域、变量的作用域、作用域链、预解析、对象
文章目录 JavaScript基础第05天笔记 1 - 作用域 1.1 作用域概述 1.2 全局作用域 1.3 局部作用域 1.4 JS没有块级作用域 2 - 变量的作用域 3 - 作用域链 4 - ...
前端学习记录 —— JavaScript（一）
前端学习记录 -- JavaScript(一) 前言一.初识 JavaScript JavaScript 的特点 JavaScript的作用编程语言与标记语言的区别 HTML/CSS/JS 的关系 ...
JavaScript 预解析、对象、错误
单线程记住一句话:JavaScript语言是单线程的区分线程和进程进程是一个工厂,工厂有它的独立资源-工厂之间相互独立-线程是工厂中的工人,多个工人协作完成任务-工厂内有一个或多个工人-工人之间 ...
【前端工程师手册】JavaScript作用域拾遗
[前端工程师手册]JavaScript作用域拾遗昨天总结了一些作用域的知识[前端工程师手册]JavaScript之作用域,但是发表完发现忘记了一些东西,今天拾个遗. 昨天说到了JavaScript中 ...
前端学习记录 —— HTML篇（下）
前端学习记录 -- HTML篇(下) 一.表格标签 table,tr,td 1. 表格标题 <caption></caption><caption></cap ...
前端学习记录13-CSS-(滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素)
前端学习记录13-CSS-滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素滑动门技术微信导航栏实现静态轮播图实现网上引用的图标字体设置过渡效果(transit ...

前端学习记录27-JavaScript-(作用域、预解析、自定义对象)