05-JS基础-对象

JavaScript的对象是一种带有属性和方法的特殊数据类型，它由若干键值对组成。

var obj = {
    name: '漩涡鸣人',
    age: 17,
    gender: '男',
    hometown: '火之国 木叶村'
};

创建对象

1. 对象初始化器

var obj = {
    name: '漩涡鸣人',
    age: 17,
    gender: '男',
    hometown: '火之国 木叶村',
    run:function () {
        alert("跑步");
    }
};

2. 构造函数

var obj = new Object();
obj.name = "xiaolan";
obj.age = 17;

function ninja(name, gender, hometown) {
    this.name = name;
    this.gender = gender;
    this.hometown = hometown;

    function work() {
        alert("暗杀");
    }
}

var ninja = new ninja("旗木卡卡西", "男", "木叶村");

属性名和属性值

向对象中添加属性:
对象.属性名 = 属性值;
对象["属性名"] = 属性值;

读取对象中的属性:
对象.属性名
对象["属性名"]

如果读取一个对象中没有的属性，它不会报错，而是返回一个undefined。

删除对象中的属性:
delete 对象.属性名
delete 对象["属性名"]

检查对象中是否含有指定属性：
"属性名" in 对象

如果在对象中含有该属性，则返回true，如果没有则返回false。

对象的属性名不强制要求遵守标志符规范，但使用时还是尽量按标识符规范来写。
如果要使用特殊的属性名，需要采用 对象[] = 属性值 格式，存取都需要这种格式。

// 格式一
obj.name = "xiaoming";
var res = obj.name;
// 格式二
obj ["name"] = "test";
var res1 = obj ["name"];

// 检查obj中是否包含"name"属性
if ("name" in obj){
}

• 基本数据类型与引用数据类型
• 基本数据类型：
  Number、String 、Boolean、Null和Undefined
  基本数据类型是按值访问的，因为可以直接操作保存在变量中的实际值。

var a = 10;
var b = a;
b = 20;
console.log(a); // 10值
/*
* b获取的是a值得一份拷贝，虽然，两个变量的值相等，但是两个变量保存了两个不同的基本数据类型值。
* b保存了a复制的一个副本。所以，b的改变，对a没有影响。同样a改变，对b也没有影响。　
*/

基本数据类型赋值的过程

• 引用类型数据：
  对象类型为 Object，比如：Object 、Array 、Function 、Data等。
  javascript的引用数据类型是保存在堆内存中的对象。
  不可以直接访问堆内存空间中的位置和操作堆内存空间。只能操作对象在栈内存中的引用地址。
  所以，引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存中堆内存中的对象。

var obj1 = new Object();
var obj2 = obj1;
obj2.name = "xiaobai";
console.log(obj1.name); // xiaobai
/*
* 这两个引用数据类型指向了同一个堆内存对象。
* obj1赋值给pbj2，实际上这个堆内存对象在栈内存的引用地址复制了一份给了obj2.
* 实际上他们共同指向了同一个堆内存对象。实际上改变的是堆内存对象。
* */

引用数据类型赋值过程

函数

函数是由一连串的子程序(语句的集合)所组成的，可以 被外部程序调用。向函数传递参数之后，函数可以返回一 定的值。
函数也是一个对象，也具有普通对象的功能。
函数中可以封装一些代码，在需要的时候可以去调用函数来执行这些代码。
使用typeof检查一个函数时会返回function。

• 创建函数

1. 构造函数（一般不用）

var work = new Function(
    "console.log('工作');"
);

2. 函数声明

// [] 表示可选，函数可以没有参数
function 函数名([形参1,形参2...形参N]){
    语句...
}

3. 函数表达式

var 函数名 = function([形参1,形参2...形参N]){
    语句...
};

• 调用函数

语法：函数对象([实参1,实参2...实参N]);

当我们调用函数时，函数中封装的代码会按照编写的顺序执行。

• 形参和实参
  形参：形式参数
  定义函数时，可以在()中定义一个或多个形参，形参之间使用","隔开。
  定义形参就相当于在函数内声明了对应的变量但是并不赋值，形参会在调用时才赋值。
  实参：实际参数
  调用函数时，可以在()传递实参，传递的实参会赋值给对应的形参, 调用函数时JS解析器不会检查实参的类型和个数，可以传递任意数据类型的值。
  如果实参的数量大于形参，多余实参将不会赋值，如果实参的数量小于形参，则没有对应实参的形参将会赋值undefined。

function personInfo(info) {
    console.log(info);
}

var person = {
    name : "Conan",
    age : 16,
    address : "Tykyo"
}

this.personInfo(person); // {name: "Conan", age: 16, address: "Tykyo"}

// 将匿名函数作为实参，传递给一个函数
function fun(a) {
    a(); 
}
this.fun(function () {
    console.log("匿名函数实参");
});

function sum(a, b) {
    var sum = a + b;
    console.log(a + " + " + b + " = " + sum);
    return sum;
}
function fun(f, a, b) {
    f(a, b);
}
this.fun1(sum, 2, 8); // 2 + 8 = 10

• 返回值
  返回值就是函数执行的结果。
  使用return 来设置函数的返回值。

语法：return 值;

function sum(a, b) {
    var sum = a + b;
    return sum;
}
console.log("return = " + this.sum(3, 8)); // 11

return后边的代码都不会执行，一旦执行到return语句时，函数将会立刻退出。
return后可以跟任意类型的值，可以是基本数据类型，也可以是一个对象。
如果return后不跟值，或者是不写return则函数默认返回undefined。

• break、continue和return

  • break
    - 退出循环
  • continue
    - 跳过当次循环
  • return
    - 退出函数

• 立即执行函数
  往往只会执行一次。

(function() {
    console.log("立即执行函数");
})();

(function(a,b) {
    console.log("a = " + a);
    console.log("b = " + b);
})(10,11);

• 方法（method）
  可以将一个函数设置为一个对象的属性，当一个对象的属性是一个函数时，我们称这个函数是该对象的方法。

调用格式：对象.方法名();

var obj = new Object();
obj.name = "xiaobai";
obj.sayHi = function () {
    console.log("xiaobai hello");
};

console.log(obj.sayHi);
obj.sayHi();

var obj2 = {
    name: "xiaoli",
    sayHi: function () {
        console.log("xiaoli hello");
    }
};
obj2.sayHi();

• call()和apply()
  这两个方法都是函数对象的方法，需要通过函数对象来调用。
  当对函数调用call()和apply()，都会 执行函数。
  调用call()时，可以将一个对象指定为第一个参数，第二个参数开始为实参。
  调用apply()时，可以将一个对象指定为第一个参数，实参需要封装到数组中统一传递。

function fun5() {
    console.log(this.name);
}

fun5.call();
fun5.call(obj1); // xiaolan
fun5.call(obj2); // xiaobai
// fun5.apply();

function fun6(a, b) {
    console.log("a = " + a);
    console.log("b = " + b);
}

fun6.call(null,2,4);
fun6.apply(null, [3,6]);

• arguments
  在调用函数时，浏览器每次都会传递进两个隐含的参数，
  1）函数上下文对象this
  2）封装实参的对象arguments，argument是一个类数组对象
  即使函数不定义形参，也可以通过arguments来使用实参。

function fun7() {
    console.log(arguments);
    console.log(arguments.callee); // 正在执行的函数对象，即fun7
}
fun7(); // Arguments []
fun7("hi", 1); // Arguments ["hi", 1]

作用域

作用域简单来说就是一个变量的作用范围。

• 全局作用域
  1）直接在script标签中编写的代码都运行在全局作用域中。
  2）全局作用域在打开页面时创建，在页面关闭时销毁。
  3）全局作用域中有一个全局对象window，window对象由浏览器提供，可以在页面中直接使用，它代表的是整个的浏览器的窗口。
  4）在全局作用域中创建的变量和函数都会作为window对象的属性保存，可以在页面的任意位置访问。
  5）在函数作用域中也可以访问到全局作用域的变量。

• 函数作用域
  1）函数作用域是函数执行时创建的作用域，每次调用函数都会创建一个新的函数作用域。
  2）函数作用域在函数执行时创建，在函数执行结束时销毁。
  3）在函数作用域中创建的变量，不能在全局中访问。
  4）当在函数作用域中使用一个变量时，它会先在自身作用域中寻找，如果找到了则直接使用，如果没有找到则到上一级作用域中寻找如果找到了则使用，找不到则继续向上找。

• 变量的声明提前
  在全局作用域中，使用var关键字声明的变量会在所有的代码执行之前被声明，但是不会赋值，undefined。
  所以我们可以在变量声明前使用变量。但是不使用var关键字声明的变量不会被声明提前。
  在函数作用域中，也具有该特性，使用var关键字声明的变量会在函数所有的代码执行前被声明，如果没有使用var关键字声明变量，则变量会变成全局变量。

console.log("a = " + a); // undefined
console.log("b = " + b); // Can't find variable: b

var a = 123;
b = 111;

• 函数的声明提前
  在全局作用域中，使用函数声明创建的函数（function fun(){}）,会在所有的代码执行之前被创建，也就是我们可以在函数声明前去调用函数，但是使用函数表达式(var fun = function(){})创建的函数没有该特性。
  在函数作用域中，使用函数声明创建的函数，会在所有的函数中的代码执行之前就被创建了。

fun1(); // "函数声明"
fun2(); // fun2 is not a function.

function fun1() {
    console.log("函数声明");
}

var fun2 = function () {
    console.log("函数表达式");
}

this（上下文对象）

我们每次调用函数时，解析器都会将一个上下文对象作为隐含的参数传递进函数。
使用this来引用上下文对象，根据函数的调用形式不同，this的值也不同。
this的不同的情况：
1.以函数的形式调用时，this是window
2.以方法的形式调用时，this就是调用方法的对象
3.以构造函数的形式调用时，this就是新创建的对象

function fun3() {
    console.log(this);
}

var obj3 = {
    name: "Naruto",
    sayName: fun3
};

fun3(); // Window {personInfo: function, fun1: function, …}
obj3.sayName(); // Object:{name: "Naruto", sayName: function}

构造函数

1）构造函数是专门用来创建对象的函数。
2）一个构造函数我们也可以称为一个类。
3）通过一个构造函数创建的对象，我们称该对象是这个构造函数的实例。
4）通过同一个构造函数创建的对象，我们称为一类对象。
5）构造函数就是一个普通的函数，只是他的调用方式不同:
  如果直接调用，它就是一个普通函数
  如果使用new来调用，则它就是一个构造函数

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

function Dog(name, age) {
    this.name = name
    this.age = 2;
}

var p = new Person("Luffy", 17);
var d = new Dog("旺财", 2);
console.log(p); // Person {name: "Luffy", age: 17}
console.log(d); // Dog {name: "旺财", age: 2}

• instanceof
  用来检查一个对象是否是一个类的实例。

语法：对象 instanceof 构造函数

// 如果该对象是构造函数的实例，则返回true，否则返回false。
console.log(p instanceof Person); // true

Object是所有对象的祖先，所以任何对象和Object做instanceof都会返回true。

• 枚举对象中的属性
  使用 for in语句

语法：
for (var 变量 in 对象){
}

var obj = new Object();
obj.name = "xiaobai";
obj.age = 11;
obj.address = "Beijing";

for (var attr in obj) {
    console.log(attr + " = " + obj[attr]); // attr为obj中的属性名,obj[attr]为该属性对应的属性值
}

原型 prototype

创建一个函数以后，解析器都会默认在函数中添加一个prototype属性。
prototype属性指向的是一个对象，这个对象我们称为原型对象。
当函数作为构造函数使用，它所创建的对象中都会有一个隐含的属性执行该原型对象。
这个隐含的属性可以通过对象.__proto__来访问。

prototype属性

function MyClass(){

}
MyClass.prototype.test = 666;
MyClass.prototype.work = function () {
    console.log("工作");
};

var mc = new MyClass();
console.log(MyClass.prototype); // MyClass {}
console.log(mc.__proto__);      // MyClass {}
console.log(mc.test);
mc.work();

原型对象就相当于一个公共的区域，凡是通过同一个构造函数创建的对象他们通常都可以访问到相同的原型对象。
我们可以将对象中共有的属性和方法统一添加到原型对象中，这样我们只需要添加一次，就可以使所有的对象都可以使用。

当我们去访问对象的一个属性或调用对象的一个方法时，它会先自身中寻找，如果在自身中找到了，则直接使用。如果没有找到，则去原型对象中寻找，如果找到了则使用，如果没有找到，则去原型的原型中寻找，依此类推。直到找到Object的原型为止，Object的原型的原型为null，如果依然没有找到则返回undefined。

• hasOwnProperty()
  这个方法可以用来检查对象自身中是否含有某个属性。

语法：对象.hasOwnProperty("属性名")

使用 in 检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true。

console.log("test" in mc); // true
console.log(mc.hasOwnProperty("test")); // false