Web前端-JavaScript（对象）

1.对象

1.1 概念

1. 什么是对象

   1. 在 JavaScript 中，对象是一组无序的相关属性和方法的集合，万物皆对象，对象是由属性和方法组成的。

      1. 属性：事物的特征，在对象中用属性来表示（常用名词）
      2. 方法：事物的行为，在对象中用方法来表示（常用动词）
      

2. 为什么需要对象

   1. 保存一个值时，可以使用变量，保存多个值时，可以使用数组。

   2. 如果要保存一个人的完整信息呢？

      例如，将张三的个人的信息保存在数组中的方式为：

      var arr = ['张三', '男', 23];
      

      上述例子中用数组保存数据的缺点是：数据只能通过索引值访问，开发者需要清晰的清楚所有的数据的排行才能准确地获取数

      据，而当数据量庞大时，不可能做到记忆所有数据的索引值。

      使用对象：

       var zs = {
                  name: "张三", //键值对
                  sex: "男",
                  age: 23
      					}
      

1.2 创建对象三种方式

对象字面量创建对象：

1. 键：相当于属性名

2. 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

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

3. 对象的使用

• 对象的属性

  • 对象中的 键称为对象的属性，即对象中存储具体数据的项

• 访问对象的属性

  • 对象里面的属性调用 : 对象.属性名

  • 对象里面属性的另一种调用方式 : 对象['‘属性名’]

  console.log(star.name) // 调用名字属性
  console.log(star[‘name’]) // 调用名字属性

• 调用对象的方法

  • 对象里面的方法调用：对象.方法名()

  star.sayHi(); // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

• 修改变量属性

  start.age = 22
  start['age'] = 23
  

new Object创建对象

1. 创建空对象

   var andy = new Object();
   

2. 给空对象添加属性和方法

   1. 通过对象操作属性和方法的方式，来为对象增加属性和方法
   2. Javascript的动态特性：可以随时的为对象增加一些成员，方法是对象.属性=’ ’

   var andy = new Obect();
   
   andy.name = 'pink';
   andy.age = 18;
   andy.sex = '男';
   andy.sayHi = function(){
       alert('大家好啊~');
   }
   

构造函数创建对象

1. 我们为什么需要构造函数

   因为我们一次创建一个对象，里面很多的属性和方法是大量相同的 我们只能复制

2. 构造函数注意事项

   1. 构造函数约定首字母大写
   2. 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
   3. 构造函数中不需要 return 返回结果。
   4. 当我们创建对象的时候，必须用 new 来调用构造函数。
   5. 创建对象，如 new Person()，通过 new 关键字创建对象的过程我们也称为对象实例化

   //1.自定义构造函数
   function Person(name, age, height) {
       this.name = name
       this.age = age
       this.height = height
   }
       //2.创建对象
   var zs = new Person("张三",23,181);
   var ls = new Person("李四",24,182);
   console.log(zs.name)
   console.log(ls.name)
   

1.3 遍历对象

for in

for (var 变量 in 对象名字) {
    
}

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。

//1.自定义构造函数
function Person(name, sex, age) {
    this.name = name
    this.sex = sex
    this.age = age
}

//2.创建对象
var zs = new Person("张三", '男', 23);
for (var key in zs) {
    //console.log(key);
    console.log(zs[key]);
}

删除对象的成员：属性及方法使用关键字delete

function Person(name, sex, age, eat) {
    this.name = name
    this.sex = sex
    this.age = age
    this.eat = eat
}

//创建对象
var zs = new Person("张三", '男', 23, function () { console.log('eat'); });

console.log(zs.age);
delete zs.age
console.log(zs.age);

zs.eat()
delete zs.eat //不可以加()
zs.eat()//调用失败

2.作用域

1.1 概述

​ 通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。

1.2 全局作用域

​ 作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

1.3 局部作用域

​ 作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，也称为函数作用域。

1.4 JS没有块级作用域

• 块作用域由 { } 包括。

• 在其它编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用。

  java有块级作用域：

  if(true){
    int num = 123;
    system.out.print(num);  // 123
  }
  system.out.print(num);    // 报错
  

  而与之类似的JavaScript代码，则不会报错：

  Js中没有块级作用域

  if(true){
    var num = 123;
    console.log(num); //123
  }
  console.log(num);   //123
  

1.5 变量的作用域

1. 全局变量

   1. 在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）
   2. 全局变量在代码的任何位置都可以使用
   3. 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

   function add() {
     a = 3;//全局变量 一般不用
     console.log(a);
   }
   add();//函数必须被执行起来
   console.log(a);
   

2. 局部变量

   1. 在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
   2. 局部变量只能在该函数内部使用
   3. 在函数内部 var 声明的变量是局部变量
   4. 函数的形参实际上就是局部变量

   function add() {
       var a = 3
       console.log(a);
   }
   add()
   console.log(a);//访问不到
   

3. 全局变量和局部变量的区别

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

   2. 局部变量：只在函数内部使用，当其所在的代码块的函数被调用执行时，会被初始化；

      ​ 当代码被调用的函数代码块运行结束后，就会被销毁，因此更节省内存空间；

1.6 作用域链

1. 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；
2. 根据在**[内部函数可以访问外部函数变量]**的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

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

采取就近原则

案例分析1：

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

案例分析2：

var a = 1;
function fn1() {
    var a = 2;
    var b = '22';
    fn2();
    function fn2() {
        var a = 3;
        fn3();
        function fn3() {
            var a = 4;
            console.log(a); //a的值 ?
            console.log(b); //b的值 ?
        }
    }
}
fn1();

1.7 预解析

奇怪问题1：

console.log(num);
var num = 5;

奇怪问题2：

f1();
function f1(){
		console.log('hello')
}

1. 预解析相关概念

   1. 浏览器执行代码的时候分两步：预解析和代码执行。
   2. 预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
   3. 代码执行： 从上到下执行JS语句。
   4. 预解析会把变量和函数的声明在代码执行之前执行完成。

2. 变量预解析

   1. 变量预解析也叫做变量提升。
   2. 变量提升： 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

   console.log(num);  // 结果是多少？
   var num = 10; 
   

   结果：undefined
   注意：变量提升只提升声明，不提升赋值
   

3. 函数预解析

   1. 函数预解析也叫函数提升。
   2. 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

   fn();
   function fn() {
       console.log('未来可期');
   }
   

   结果：'未来可期'
   注意：函数声明代表函数整体，所以函数提升后，函数名代表整个函数，但是函数并没有被调用！	
   

   提升之后：

   function fn() {
       console.log('未来可期');
   }
   fn();
   

4. 匿名函数问题

   匿名函数会执行变量提升，此时接收函数的变量名无法正确的调用：

   fn();
   var  fn = function() {
       console.log('未来可期');
   }
   

   结果：报错提示 ”fn is not a function"
   解释：该段代码执行之前，会做变量声明提升，fn在提升之后的值是undefined；而fn调用是在fn被赋值为函数体之前，此时fn的值是undefined，所以无法正确调用
   

   提升之后：

   var fn;
   fn();
   fn = function () {
       console.log('未来可期');
   }
   

5. 总结：

   1. 我们js引擎运行js 分为两步： 预解析 代码执行
      1. 预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面
      2. 代码执行 按照代码书写的顺序从上往下执行
   2. 预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）
      1. 变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
      2. 函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数

预解析案例：

// 案例1
var num = 10;
fun();
function fun() {
    console.log(num);
    var num = 20;
}

//预解析之后------------------

var num;
function fun() {
    var num;
    console.log(num);
    num = 20;
}
num = 10;
fun();




//案例2
var num = 10;
function fn() {
    console.log(num);
    var num = 20;
    console.log(num);
}
fn();

//预解析之后------------------

var num;
function fn() {
    var num;
    console.log(num);
    num = 20;
    console.log(num);
}
num = 10;
fn();




// 案例3
var a = 18;
f1();
function f1() {
    var b = 9;
    console.log(a);
    console.log(b);
    var a = '123';
}

//预解析之后------------------

var a;
function f1() {
    var b = 9;
    var a;
    console.log(a);
    console.log(b);
    a = '123';
}
a = 18;
f1();