前端笔记---6.javascript基础（作用域，对象，简单类型与复杂类型）

作用域

作用域：变量或者函数可以起作用的范围

全局变量和局部变量

• 全局变量

  在任何地方都可以访问到的变量就是全局变量，对应全局作用域

• 局部变量

  只在固定的代码片段内可访问到的变量，最常见的例如函数内部。对应局部作用域(函数作用域)

1. 不使用var声明的变量是全局变量，不推荐使用。
2. 变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁

var num = 10;
function fn(){
    str='abc';//既不属于函数内部定义的，在外部也没有定义
    //隐式全局变量，不建议这么写不规范
    console.log(num)
}
fn();
//delete //删除变量
delete num //false 
delete str //true //可以删除隐式全局变量，使用var声明的全局变量不能够被delete删除

块级作用域

任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。

在es5之前没有块级作用域的的概念,只有函数作用域，现阶段可以认为JavaScript没有块级作用域

作用域链

1. 在ECMAScript中，只有函数可以制造局部作用域结构。 那么只要是代码，就至少有一个作用域, 即全局作用域。
2. 凡是代码中有函数，那么这个函数就构成另一个作用域。
3. 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。
4. 将这样的所有的作用域列出来，可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。

var num = 5;//全局作用域 ------0级
function f1(){//局部作用域------1级
    var num = 15;//局部变量
    function f2(){//局部作用域------2级
        console.log(num);
        //在当前作用域中去访问num的时候，如果在挡枪作用域找到了num变量，则访问
        //如果没有找到，则继续往上层作用域去寻找
        //如果到顶级作用域都没有找到，则返回 num is not defined
    }
    f2();
}
f1();

对象

为什么要有对象

function printPerson(name, age, sex....) {
}
// 函数的参数如果特别多的话，可以使用对象简化
function printPerson(person) {
  console.log(person.name);
  ……
}

什么是对象

现实生活中：万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征。

举例： 一部车，一个手机

车是一类事物，门口停的那辆车才是对象
特征：红色、四个轮子
行为：驾驶、刹车

JavaScript中的对象

JavaScript中的对象其实就是生活中对象的一个抽象

JavaScript的对象是无序属性的集合。

​ 其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript中的对象想象成键值对，其中值可以是数据和函数。

对象的行为和特征
特征—属性
行为—方法

• 事物的特征在对象中用属性来表示。
• 事物的行为在对象中用方法来表示。

对象字面量

var o = {
  name: 'zs,
  age: 18,
  sex: true,
  sayHi: function () {
    console.log(this.name);
  }
};

思考：

如何把学生对象、老师对象、英雄对象改写成字面量的方式

对象创建方式

对象字面量

通过字面量创建对象

var person = {
  name : '黄忠',
  age : 35,
  job : 'actor',
  sayHi : function(){
    console.log(this.name+'Hello,everyBody');
  }
}

new Object()方法创建对象

object是系统提供的一个创建对象的构造函数

var person = new Object();
  person.name = 'lisi';
  person.age = 35;
  person.job = 'actor';
  person.sayHi = function(){
  console.log('Hello,everyBody');
}

工厂函数创建对象

工厂函数：批量生产，流水操作

创建多个对象的时候使用工厂函数。

function createPerson(name, age, job) {
  var person = new Object();
  person.name = name;
  person.age = age;
  person.job = job;
  person.sayHi = function(){
    console.log('Hello,everyBody');
  }
  return person;
}
var p1 = createPerson('张三', 22, 'actor');

属性和方法

1. 如果一个变量属于一个对象所有，那么该变量就可以称之为该对象的一个属性，属性一般是名词，用来描述事物的特征
2. 如果一个函数属于一个对象所有，那么该函数就可以称之为该对象的一个方法，方法是动词，描述事物的行为和功能

对象的使用

遍历对象的属性

通过 for … in可以遍历一个对象

var obj = {};
for (var i = 0; i < 10; i++) {
  obj[i] = i * 2;
}
//数组有下标，对象没有下标
for(var key in obj) {
  console.log(key + "==" + obj[key]);
  //这里取对象值不能用点语法，点语法认为创建了一个key的属性
}

删除对象的属性delete

var obj = {
    name: 'mm'
}; 
console.log(obj.name); // mm 
delete obj.name;
console.log(obj.name); // undefined

简单类型和复杂类型

简单数据类型，又叫基本类型，值类型

number string boolean null undefined

复杂数据类型，又叫 引用类型。

object

值类型：简单数据类型，基本数据类型，在存储时，变量中存储的是值本身，因此叫做值类型。在内存空间中存储在栈里

引用类型：复杂数据类型，在存储是，变量中存储的仅仅是地址（引用），因此叫做引用数据类型。在内存空间中存储在堆里

栈和堆

堆栈空间分配区别：

1. 栈（操作系统）：由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；

使用var声明一个变量时，系统会自动分配一个栈空间给这个变量

2. 堆（操作系统）： 存储复杂类型(对象)，一般由程序员分配释放， 若程序员不释放，由垃圾回收机制回收，分配方式倒是类似于链表。

注意：JavaScript中没有堆和栈的概念，此处我们用堆和栈来讲解，目的方便理解和方便以后的学习。

内存模型

基本类型在内存中

var n1 = 10;
var n2 = n1;
console.log(n1,n2);//10,10
n1 = n1+1;
console.log(n1,n2);//11,10
//n1 n2是独立的内存，相互不影响，如图

复杂类型在内存中

var p1 = new Object();
p1.name = 'zs';
p1.age = 18;
p1.sayHi = function(){
    console.log(this.name+'哈喽');
};
var p2 = p1;
console.log(p2.name);//zs
p1.name = 'ls';
console.log(p2.name);//ls
//p1和p2是引用类型，存储的是内存地址，指向的是同一个内存空间，因此p1的值改变时，p2的值也会改变，如图

基本类型作为参数

function fn(a,b) {
    //形参相当于隐式声明了 var a,b;内存中也会开辟相应的空间存储
    a = a + 1;
    b = b + 1;
    console.log(a,b);
}
var x = 10;
var y = 20;
fn(x,y);
console.log(x,y)//10,20
//x,y和a,b互相不影响，如图

复杂类型作为参数

内容和图片见下篇笔记

var obj = new Object();
obj.name = 'zs';
obj.age = 18;
obj.sayHi = function(){
    console.log(this.name+'哈喽');
};

function fn(person) {
    person.name = 'ls';
}
fn(obj);
console.log(obj.name);//ls
//person 和 obj在栈中记录的是同一个地址，指向同一个内存空间，因此通过person改变对象的值时，相应的obj的对象的值也会改变。如图

var obj = new Object();
obj.name = 'zs';
obj.age = 18;
obj.sayHi = function(){
    console.log(this.name+'哈喽');
};

function fn(person) {
     person.name = 'ls';
    person = new Object();
    //此时，在内存中开辟一个新的空间，
    person.name = 'ww';
    person.age = 20;
    console.log(person.name);//ww
}
fn(obj);
console.log(obj.name);//ls person重新指向了新的空间，因此person中的对象值与obj的对象值无关，不再指向同一个内存，如图

案例：冒泡排序分析

function sortArr(arr) {
    for(var i = 0; i < arr.length - 1; i++) {
        var isSort = true;
        for (var j = 0; j < arr.length - 1 - i; j++) {
            if(arr[j] > arr[j+1]){
                var tmp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = tmp;
                isSort = tmp;
                isSort = false;
            }
        }
        if(isSort) {
            break;
        }
    }
    //return arr;这里其实可以不用返回，原因如图
}
var arr = [2,3,55,63,24,67,88];
sortArr(arr);
console.log(arr);//[2,3,24,55,63,67,88]
var r = sortArr(arr);
console.log(r);//因为函数中没有返回值，所以会打印出undefined;
/Array其实是一种特殊的object类型，即引用类型
var array = [1,2,3,4,5];
function fn(arr) {
    arr[0] = -1;
}
fn(array);
console.log(array);//[-1,2,3,4,5];如图