JavaScript核心 对象和函数

对象

• 定义

  • 对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。

• 对象的分类

  • 内建对象
    • 由ES标准中定义的对象，在任何的ES的实现中都可以使用
      • 比如：Math String Number Boolean Function Object....
  • 宿主对象
    • 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
      • 比如 BOM DOM
  • 自定义对象
    • 由开发人员自己创建的对象

对象属性的操作

• 创建对象

/*
 * 使用new关键字调用的函数，是构造函数constructor
 *  构造函数是专门用来创建对象的函数
 * 使用typeof检查一个对象时，会返回object
 */
var obj = new Object();

• 给对象添加属性
  • 对象的属性名不强制要求遵守标识符的规范
  • 什么乱七八糟的名字都可以使用，但是我们使用是还是尽量按照标识符的规范去做

/*
 * 在对象中保存的值称为属性
 * 向对象添加属性
 *  语法：对象.属性名 = 属性值;
 */
//向obj中添加一个name属性
obj.name = "孙悟空";
//向obj中添加一个gender属性
obj.gender = "男";
//向obj中添加一个age属性
obj.age = 18;

• 读取对象中的属性

/*
 * 读取对象中的属性
 *  语法：对象.属性名
 *
 * 如果读取对象中没有的属性，不会报错而是会返回undefined
 */
console.log(obj.gender);
console.log(obj.hello);

• 修改对象中的属性
  • 方式一：使用.语法
    • 语法：对象.属性名 = 新值
  • 方式二：使用[]语法
    • 如果要使用特殊的属性名，不能采用.的方式来操作 - 需要使用另一种方式：对象["属性名"] = 属性值
    • 使用[]这种形式去操作属性，更加的灵活，在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性

/*
 * 修改对象的属性值
 *  语法：对象.属性名 = 新值
 */
obj.name = "tom";

//使用[]设置对象属性
obj["123"] = 789;
obj["nihao"] = "你好";

• 删除对象中的属性

/*
 * 删除对象的属性
 *  语法：delete 对象.属性名
 */
delete obj.name;

• 检查对象是否含有指定属性
  • 通过 in 运算符，可以检查一个对象中是否含有指定的属性
  • 如果有则返回true，没有则返回false
• 语法："属性名" in 对象

console.log("name" in obj);

基本数据类型和引用数据类型

• 基本数据类型

  • String Number Boolean Null Undefined

• 引用数据类型

  • Object

• 存储的区别

  • 基本数据类型
    • 基本数据类型的值直接在栈内存中存储，值与值之间是独立存在，修改一个变量不会影响其他的变量
  • 引用数据类型
    • 对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，当一个通过一个变量修改属性时，另一个也会受到影响

• 基础数据类型的比较，比较的是值

var a = 123;
var b = 123;
//true
console.log(a == b);

• 引用数据类型的比较，比较的是对象的内存地址，如果两个对象是一摸一样的，但是地址不同，它也会返回false

var obj3 = new Object();
var obj4 = new Object();
obj3.name = "沙和尚";
obj4.name = "沙和尚";

//false
console.log(obj3 == obj4);

对象字面量

• 使用new关键字创建对象

var obj = new Object();

• 使用对象字面量来创建一个对象

var obj = {};

• 使用对象字面量，可以在创建对象时，直接指定对象中的属性
  • 语法：{属性名:属性值,属性名:属性值....}
  • 对象字面量的属性名可以加引号也可以不加，建议不加，如果要使用一些特殊的名字，则必须加引号
  • 属性名和属性值是一组一组的名值对结构，名和值之间使用:连接，多个名值对之间使用,隔开，如果一个属性之后没有其他的属性了，就不要写,

var obj2 = {
    name: "猪八戒",
    age: 13,
    gender: "男",
    test: {name: "沙僧"}
};

函数

• 函数 function
  • 函数也是一个对象
  • 函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）
  • 函数中可以保存一些代码在需要的时候调用
  • 使用typeof检查一个函数对象时，会返回function

创建函数

• 使用构造函数，创建函数
  • 我们在实际开发中很少使用构造函数来创建一个函数对象，因为需要封装的代码以字符串的形式传递给构造函数，特别难写和维护

var fun = new Function("console.log('Hello 这是我的第一个函数');");

//封装到函数中的代码不会立即执行
//函数中的代码会在函数调用的时候执行
//调用函数 语法：函数对象()
//当调用函数时，函数中封装的代码会按照顺序执行
//fun();

• 使用函数声明，创建函数

/*
 * 使用 函数声明 来创建一个函数
 *  语法：
 *      function 函数名([形参1,形参2...形参N]){
 *          语句...
 *      }
 */
function fun2() {
    console.log("这是我的第二个函数~~~");
    alert("哈哈哈哈哈");
    document.write("~~~~(>_<)~~~~");
}
//调用fun2
//fun2();

• 使用函数表达式，创建函数

/*
 * 使用 函数表达式 来创建一个函数
 * var 函数名  = function([形参1,形参2...形参N]){
 *   语句....
 *  }
 */
var fun3 = function () {
    console.log("我是匿名函数中封装的代码");
};
//调用函数
fun3();

函数的参数

• 声明函数

/*
 * 定义一个用来求两个数和的函数
 *  可以在函数的()中来指定一个或多个形参（形式参数）
 *  多个形参之间使用,隔开，声明形参就相当于在函数内部声明了对应的变量
 *  但是并不赋值
 */
function sum(a, b) {
    console.log("a = " + a);
    console.log("b = " + b);
    console.log(a + b);
}

• 调用函数

/*
 * 在调用函数时，可以在()中指定实参（实际参数）
 *  实参将会赋值给函数中对应的形参
 */
sum(1,2);
sum(123,456);

/*
 * 调用函数时解析器不会检查实参的类型,
 *  所以要注意，是否有可能会接收到非法的参数，如果有可能则需要对参数进行类型的检查
 * 函数的实参可以是任意的数据类型
 */
sum(123,"hello");
sum(true , false);

/*
 * 调用函数时，解析器也不会检查实参的数量
 *  多余实参不会被赋值
 *  如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined
 *
 */
sum(123,456,"hello",true,null);

立即执行函数

• 函数定义完了，立即被调用，这种函数就叫做立即执行函数
• 特点：
  • 立即执行函数，只会执行一次

/**
 * 立即执行函数，空参
 */
(function () {
    alert("我是一个匿名函数")
})();

/**
 * 立即执行函数，带参
 */
(function (a, b) {
    console.log("a = " + a);
    console.log("b = " + b);
})(123, 456)

对象属性也可以是函数

• 动态添加属性为一个函数

//创建一个对象
var obj = new Object();
//对对象添加属性
obj.name = "孙悟空";
obj.age = 18;
//对象的属性值是任何的数据类型，也可以是一个函数
obj.sayName = function () {
    console.log(obj.name);
};
//console.log(obj.sayName);
//调用对象的函数
obj.sayName();

• 字面量定义对象的属性是一个函数

var obj2 = {
        name: "猪八戒",
        age: 18,
        sayName: function () {
            console.log(obj2.name);
        }
    };
//调用对象的函数
obj2.sayName();

枚举方法中的属性

var obj = {
    name: "孙悟空",
    age: 18,
    gender: "男",
    address: "花果山"
};

//枚举对象中的属性
//使用for in 语句
/**
 * 语法：
 *      for(var 变量 in 对象) {
 *
 *      }
 *  for...in语句在对象中有几个属性，循环体就会循环几次
 *  每次执行时，会将对象的一个属性的名字赋值给变量
 */
for (var n in obj) {
    console.log("属性名" + n + "，属性值：" + obj[n]);
}

作用域

• 作用域指一个变量的作用范围，在JS中一共有2种作用域
  • 全局作用域
  • 函数作用域

全局作用域

• 简介和特点

  • 直接编写在script标签中的JS代码，都在全局作用域中
  • 全局作用域在页面打开创建，页面关闭时销毁
  • 在全局作用域中，有一个全局对象window，我们可以直接使用，它代表了浏览器的窗口，它由浏览器创建
  • 在全局作用域中，创建的变量，都会作为window对象的属性保存，创建的函数都会作为window对象的方法

• 全局作用域的变量和函数都挂载在window对象中

console.log(window);
//全局作用域下申明的变量都作为window对象的属性，所以从window中可以找回
var a = 10;
var b= 20;
var c = "hello";
console.log(window.a)

//全局作用域中的函数
function fun() {
    console.log("我是fun函数");
}
fun();
window.fun();

变量声明提前

/**
 * 变量的声明提前
 *  - 使用var关键字声明的变量，会在所有的代码执行前被声明（但是不会赋值）
 *      但如果声明变量不使用var关键字，则变量不会被声明提前
 *
 *  函数的声明提前
 *      - 使用函数声明形式创建的函数 function 函数名() {}
 *          它会在所有代码执行之前就被创建，所以我们可以在函数声明前来调用函数
 *      - 使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用
 *      - 全局作用域中的变量，都是全局变量
 *          在页面的任意的部分都可以访问到
 */
 
//变量声明提前，此时值为undefined
console.log("a = " + a)
var a = 123;

//函数声明提前，所以可以在函数声明前调用
fun();
fun2();
function fun() {
    console.log("我是一个fun函数");
}
//var声明的函数，是变量声明提前，此时为undefined，不可以调用不是函数的变量，控制台会报错：Uncaught TypeError: fun2 is not a function
var fun2 = function () {
    console.log("我是fun2函数");
}

函数作用域

• 简介和特点
  • 调用函数时，创建作用域，函数执行完毕以后，函数作用域销毁
  • 每调用一次函数，就会创建一个新的函数作用域，他们之间是互相独立的
  • 在函数作用域中，可以访问到全局作用域的变量，在全局作用域中，无法访问到函数作用域的变量
• 当在函数作用域操作一个变量，它会先在自身作用域中寻找，如果有就直接使用
  • 如果没有，则向上一级作用域中寻找，直到找到全局作用域
  • 如果全局作用域中，依然没有找到，则会报错ReferenceError: a is not defined
• 在函数中，访问全局变量，可以使用window对象

示例

• 在全局作用域中，无法访问到函数作用域中的变量

//创建一个变量
var a = 10;

function fun() {
    var b = 20;
    var a = "我是fun函数中的a";
    console.log("a = " + a);
    function fun2() {
        console.log("a = " + a);
        //函数作用域中，访问全局作用域的变量
        //console.log("a = " + window.a);
    };
    fun2();
};

fun();
//在全局作用域中，无法访问到函数作用域中的变量
//console.log("b = " + b);

• 函数作用域中的变量，也有变量声明提前

/**
 * 在函数作用域中，也有声明提前的特性
 *  使用var关键字，声明的变量，会在函数中所有的代码执行之前被声明
 *  函数声明也会在函数中，所有代码执行之前创建
 */
function fun3() {
    //undefined
    console.log(a);
    //我是fun4
    fun4();

    var a = 35;
    function fun4() {
        console.log("我是fun4");
    }
}
fun3();

• 在函数中，不使用var声明的变量都会成为全局变量

var c = 33;

/**
 * 在函数中，不使用var声明的变量都会成为全局变量
 */
function fun5() {
    console.log("c = " + c);
    
    //如果打开这句注释，会产生变量提升，上面的输出会找到这个变量c的声明，但没有值，所以为undefined
    //如果不打开这句注释，就会找到全局作用域中的c，打印出33
    //var c = 10;

    //不加var，则不会产生声明，而是向上找c的全局声明
    c = 10;

    //d没有使用var关键字，则会设置为全局变量
    d = 100;//相当于window.d = 100;
}
fun5();

//在全局输出c
console.log("c = " + c);
console.log("d = " + d);

• 函数中定义的形参，也相当于在函数作用域内定义了一个var变量

var e = 23;

/**
 * 定义形参，就相当于在函数作用域中声明了变量
 */
function fun6(e) {
    //形参e，相当于在函数作用域种声明了e
    //相当于 var e;
    
    //输出20，而不是全局作用域中的23
    alert(e);
}
fun6(20);