javascript基础-5(重要)

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);


//赋值  对象名.属性名 = 值
// 如果属性名存在，被覆盖
// 如果属性名不存在，添加一个新属性