1 作用域
1.1 局部作用域
function fn () {
var num = 22;// num是fn函数内部的变量,是局部变量,只能在fn中使用
console.log(num);
}
fn();
console.log(num);// 报错
1.2 全局作用域
var num = 11;
function fn () {
console.log(num);// 可以访问全局变量num
}
fn();
console.log(num);// 可以访问全局变量num
1.3 全局变量与局部变量的访问规则
1.3.1 如果自己作用域中有声明这个变量,就用自己的
//如果自己作用域中有声明这个变量,就用自己的!
var num = 11;
function fn() {
var num = 22;
console.log(num);
}
fn();
console.log(num);
1.3.2 如果自己作用域中没有有声明这个变量,就用全局的
var num = 11;
function fn() {
num = 22;
console.log(num);
}
fn();
console.log(num);
1.3.3 例子
//分别输出22 11 11
var num = 22;
function fn() {
console.log(num);
num = 11;
console.log(num);
}
fn();
console.log(num);
1.4 隐式全局变量
当前作用域中没有声明,但是已经是全局作用域了没有上一级了,此时浏览器会隐式的去把该变量声明成全局变量
function fn (){
num = 10;
console.log( num );
}
fn();
console.log(num);
1.5 预解析
在代码开始执行之前,都会把变量和函数的声明进行提升!! 可以看做浏览器预先想要知道,有哪些变量和函数~
js的执行步骤
1 预解析
2 一行行执行代码
1.5.1 所有的变量的声明(包括函数里面的),都会提升到最顶部,但是不会提升赋值!!!
//输出undefined和12
// 第一步不是执行代码,而是预解析
console.log(num);
//----------------------------
var num = 12;
console.log(num);
1.5.2 所有的函数的声明,都会提升到最顶部,但是不会提升函数的调用
// 第一步不是执行代码,而是预解析
console.log("我是第一行代码");
fn();
function fn() {
console.log('嘻嘻');
}
1.5.3 同名问题
1.5.3.1 变量同名
//如果同时声明了多个同名的变量,只会提升第一个声明,后面的声明会忽略
var num = 11;
var num = 22;
var num = 33;
var num = 44
1.5.3.2 函数同名
//如果同时声明了多个同名的函数,后面的函数声明会覆盖前面的!!(最后只剩一个函数声明)
fn();
function fn() {
console.log('呵呵');
}
fn();
function fn() {
console.log('哈哈');
}
fn();
function fn() {
console.log('嘻嘻');
}
fn();
1.5.3.3 变量和函数同名
//这里输出的都是函数的定义
console.log(a);
function a() {
console.log('我是函数');
}
var a;
console.log(a)
1.5.4 练习(interview)
//1、 每个作用域中都有预解析——》函数内部也会预解析
var num = 10;
fn1();
function fn1() {
console.log(num);
var num = 20;
}
//2.
var a = 18;
fn2();
function fn2() {
var b = 9;
console.log(a);
console.log(b);
}
//3.
fn3();
console.log(c);
console.log(b);
console.log(a);
function fn3() {
a = b = c = 9;// 相当于: a = 9,b = 9,c = 9
// var a = b = c = 9; // 相当于只声明了一个a var a = 9 ; b = 9 ; c = 9;
console.log(a);
console.log(b);
console.log(c);
}
1.5.5 开发规范
1 先定义 后使用 2 避免同名
2 函数的两种声明方式
2.1 函数声明
function 函数名(){
//函数体
}
//------------------------------
function fn() {
console.log("呵呵");
}
fn();
2.2 函数表达式
var 函数名 = function(){
//函数体
}
//------------------------------
var fn = function() {
console.log("呵呵");
}
fn();
2.3 区别
函数声明可以先调用,再声明(因为预解析)
函数表达式必须先声明赋值,再调用(相当于变量赋值,只会提升变量声明,不会提升赋值)
3 匿名函数
3.1 函数表达式
var fn = function (){
console.log('呵呵');
}
// 将函数赋值给变量fn,此时函数没有名字
3.2 匿名函数自调用
//函数可以自调用(声明后立马使用)**,但是直接调用会报错,此时需要用()把整个函数体包裹起来才行
//一般规范匿名函数自调用之后需要加上分号
(function fn(){
consolo.log('呵呵');
})();
//-----------------------------------
(function (){
consolo.log('呵呵');
})();
匿名函数自调用的应用(沙箱模式,jquery也是这么用的)
// 小张写的代码,单独运行没毛病
var a = 11;
console.log(a);
function b() {
console.log('bbbb');
}
b();
// 小王写的代码,单独运行没毛病
var b = 22;
console.log(b);
function a() {
console.log('aaaa');
}
a();
//---------------------但是如果一起运行,全局变量就会互相影响了(全局变量污染)
//解决思路 让每个人的代码称为局部变量即可,js中只有函数里面才有局部变量,所以用函数包裹起来
//即可.但是有名字的函数还是会全局变量污染,所以用匿名函数.
4 对象
4.1 对象的创建
4.1.1 字面量
var obj = {};// 创建一个空对象
console.log(obj);
//----------------------------
var obj = {
// ------------特征——》对象的属性
name:"张三",
age:18,
sex:"男",
height:180,
weight:150,
// ------------行为——》对象的方法(对象中的函数)
eat:function (){
console.log('吃饭');
},
sleep:function (){
console.log('睡觉');
}
};
console.log(obj);
4.1.2 构造函数
var person = new Object();//创建一个空的对象
//------------------------------
var person = new Object({
name:"张三",
age:18,
sex:"男",
height:180,
weight:150,
eat:function (){
console.log('吃饭');
},
sleep:function (){
console.log('睡觉');
}
})
4.2 对象的取值与赋值
//取值 对象名.属性名
// 如果属性名存在,获取对应的值
// 如果属性名不存在,返回undefined
console.log(person.name);
console.log(person.height);
//赋值 对象名.属性名 = 值
// 如果属性名存在,被覆盖
// 如果属性名不存在,添加一个新属性