从零开始学 Web 之 JavaScript（五）面向对象

你们好，这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号，欢迎你们订阅关注。在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。如今就让咱们一块儿进入 Web 前端学习的冒险之旅吧！

1、面向对象

一、对象建立方式

1.一、调用系统函数建立对象

（建立对象的最简单方式就是建立一个 Object 的实例，而后再为它添加属性和方法。）

var obj = new Object();
obj.name = "Daotin";
obj.age = 18;
obj.eat = function () {
　　console.log("我很能吃");
);

缺点：使用同一个接口建立不少对象，会产生大量的重复代码。

1.二、自定义构造函数建立对象

工厂模式建立对象：考虑到在 ECMAScript 中没法建立类，开发人员就发明了一种函数，用函数来封装以特定接口建立对象的细节（把建立一个函数的过程封装在一个函数里面），缺点：建立的对象属性都是同样的。

function creatObject() {
    var obj = new Object();
    obj.name = "Daotin";
    obj.age = 18;
    obj.eat = function () {
        console.log("我很能吃");
    };
    return obj;
}

var person = creatObject();
person.eat();

工厂模式建立对象进阶版：能够修改属性

function creatObject(name, age) {
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.eat = function () {
        console.log("我很能吃");
    };
    return obj;
}java

var person = creatObject("Daotin", 18);
person.eat();

自定义构造函数：（函数和构造函数的区别：没有区别，可是一般构造函数首字母大写）

特色：

• 没有显式地建立对象；
• 直接将属性和方法赋给了 this 对象；
• 没有 return 语句。

function CreatObject() { // 首字母大写
    this.name = "Daotin";
    this.age = 18;
    this.eat = function () {
        console.log("我很能吃");
    };
}

var person = new CreatObject();
person.eat();

进阶（传参数）：

function CreatObject(name, age) {
    this.name = name;
    this.age = age;
    this.eat = function () {
        console.log("我很能吃");
    };
}

var person = new CreatObject();
person.eat();

构造函数的问题

构造函数模式虽然好用，但也并不是没有缺点。使用构造函数的主要问题，就是每一个方法都要在每一个实例上从新建立一遍。在前面的例子中， person1 和 person2 都有一个名为 sayName()的方法，但那两个方法不是同一个 Function 的实例。不要忘了——ECMAScript 中的函数是对象，所以每定义一个函数，也就是实例化了一个对象。从逻辑角度讲，此时的构造函数也能够这样义。

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = new Function("alert(this.name)"); // 与声明函数在逻辑上是等价的
}

从这个角度上来看构造函数，更容易明白每一个 Person 实例都包含一个不一样的 Function 实例（以显示 name 属性）的本质。说明白些，以这种方式建立函数，会致使不一样的做用域链和标识符解析，但建立 Function 新实例的机制仍然是相同的。所以，不一样实例上的同名函数是不相等的，如下代码能够证实这一点：alert(person1.sayName == person2.sayName); //false

然而，建立两个完成一样任务的 Function 实例的确没有必要；何况有 this 对象在，根本不用在执行代码前就把函数绑定到特定对象上面。所以，大可像下面这样，经过把函数定义转移到构造函数外部来解决这个问题。

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

function sayName(){
    alert(this.name);
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

在这个例子中，咱们把 sayName() 函数的定义转移到了构造函数外部。而在构造函数内部，咱们将 sayName 属性设置成等于全局的 sayName 函数。这样一来，因为 sayName 包含的是一个指向函数的指针，所以 person1 和 person2 对象就共享了在全局做用域中定义的同一个 sayName() 函数。

1.三、使用对象字面量表示法

对象字面量是对象定义的一种简写形式，目的在于简化建立包含大量属性的对象的过程。

若是留空其花括号，则能够定义只包含默认属性和方法的对象 var person = {}; //与 new Object()相同

缺点：一次性对象，没法修改属性的值。

var obj = {
    name:"Daotin",  // 注意是属性赋值是冒号
    age: 18,
    eat: function () {
        console.log("我很能吃");
    }   // 最后一个后面没有逗号
};

obj.eat();

二、访问对象属性

点表示法 和 方括号表示法

alert(person["name"]); //"Nicholas"
alert(person.name); //"Nicholas"

从功能上看，这两种访问对象属性的方法没有任何区别。但方括号语法的主要优势是能够经过变量来访问属性（属性绑定），例如：

var propertyName = "name";
alert(person[propertyName]); //"Nicholas"

若是属性名中包含会致使语法错误的字符，或者属性名使用的是关键字或保留字，也可使用方括号表示法。

例如：person["first name"] = "Nicholas";
因为"first name"中包含一个空格，因此不能使用点表示法来访问它。然而，属性名中是能够包含非字母非数字的，这时候就可使用方括号表示法来访问它们。一般，除非必须使用变量来访问属性，不然咱们建议使用点表示法。

PS： 若是访问一个没有的属性的值，那么这个值为 undefined，而不是报错？

由于 js 是一门动态类型的语言，无论使用点表示法仍是方括号表示法，若是没有这个属性，就至关于在建立这个属性，然而这个时候没有赋值，因此就是 undefined。

三、访问对象方法

对象名.函数名();

四、JSON

什么是JSON?

JSON 的全称为：JavaScript Object Notation（JavaScript对象表示形式：就是对象字面量）

JSON格式的数据：通常都是成对的，键值对。

JSON和对象字面量的区别？
json 和对象（对象字面量）的区别仅仅在于，json 格式的数据中的键必须用双引号括起来；

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

五、字面量的遍历

对象自己没有 length，因此不能用 for 循环遍历。要使用 for...in...

var json = {“aaa”: 1, “bbb”: 2, “ccc”: 3, “ddd”: 4}

for(var key in json){
    //key表明aaa,bbb.....等
    //json[key]表明1,2,3....等（k 不要加引号）
}

六、值传递和引用类型传递

分析值传递和址传递最好的方法就是画图分析，最简单。

七、内置对象

Math, Date, String, Array

学习的时候能够查阅在线文档：
MDN 在线文档
菜鸟教程

八、基本包装类型

自己是基本类型，可是在执行的过程当中，若是这种类型的变量调用了属性或者方法，那么这种类型就不是基本类型了，而是基本包装类型。这个变量也不是普通变量了，而是基本包装类型的变量。

var str = "hello";
str = str.replace("he", "wo");
console.log(str); // wollo

须要注意的地方：
若是一个对象&&true，那么结果是true
若是一个true&&对象，那么结果是对象。

var flag = new Boolean(false);
var result = flag && true;
var result1 = true && flag;

console.log(result); // true
console.log(result1); // Boolean

var num = 10; // 基本类型
var num2 = Number("10"); // 不是基本包装类型，而是转换，这里换成 Boolean 也成立
var num3 = new Number("10"); // 这才是基本包装类型