JavaScript之面向对象总结

媒介：在ECMAScript中是没有类的观点的，所以它的对象与基于类的言语中的对象差别。ECMA-262把对象总结为：“无序属性的鸠合，其属性包括基础值、对象或许函数”。

一、明白对象

var person = new Object();
person.name = "张三";
person.age = 15;

person.say = function(){
    alert('hello');
}

上面经由过程Object组织函数建立了一个对象，并为它增加了三个属性。

ECMA对象的属性有两种：数据属性和接见器属性。

var person = {
    name: "聂赫留朵夫", // 数据属性
    age: 25
}
Object.defineProperty(person, "year", { // 接见器属性
    get: function(){
        return 1922;
    },
    set: function(value){
        this.age = 25 + value;
    }
})

数据属性：包括一个数据值的位置，能够再这个位置写入和读取值

数据属性有4个形貌其行动的特征：

1. [[Configurable]]：示意可否经由过程delete删除属性从而从新定义属性，默以为true
2. [[Enumerable]]：示意可否经由过程for-in轮回返回属性，默以为true
3. [[Writeable]]：示意可否修正属性，默以为true
4. [[Value]]：包括这个属性的数据值，默许值为undefined

ps:要修正默许的特征，必需运用
Object.defineProperty

接见器属性：包括一对儿getter和setter函数，不包括数据值

接见器属性也有4个特征：

1. [[Configurable]]：示意可否经由过程delete删除属性从而从新定义属性，默以为true
2. [[Enumerable]]：示意可否经由过程for-in轮回返回属性，默以为true
3. [[Get]]：读取属性时挪用的函数，默许值为undefined
4. [[Set]]：写入属性时挪用的函数，默许值为undefined

接见器属性不能直接定义，必需经由过程
Object.defineProperty来定义

读取属性的特征，经由过程Object.getOwnPropertyDescriptor要领

二、建立对象

1、经由过程字面量或许Object组织函数

var person = {
    name: "尤瓦尔•赫拉利"
}
var car = new Object();
car.name = "法拉利"

长处：不清楚
瑕玷：运用同一个接口，会发生大批的代码

2、工场形式

function createPerson(name, age){
    var o = new Object();
    o.name = name;
    o.age = age;
    return o;
}
var p1 = createPerson("方鸿渐", 14);
var p2 = createPerson("墨带", 20);

长处：处理了建立多个类似对象的题目
瑕玷：很明显，你不知道建立的对象的范例是什么

3、组织函数形式

function Person(name, age){
    this.name = name;
    this.age = age;
}
var person = new Person("智人", 25);

建立实例，必需要经由过程new关键字，new挪用阅历的步骤：

• 建立一个新的对象
• 将组织函数的this指向新的对象
• 实行组织函数中的代码
• 返回新对象

长处：能够将每一个实例都标识为一种特定的范例
瑕玷：每一个要领都要在实例上从新建立一遍

4、原型形式

function Person(){}
Person.prototype.name = "凯撒大帝";
Person.prototype.age = 500;

var p1 = new Person();
console.log(p1.name); // 凯撒大帝
var p2 = new Person();

特性：一切的属性都是被许多实例同享的，但这个也是一个瑕玷。这个同享关于函数来讲挺好，关于基础范例来讲也还能够（实例上增加的同名属性能够掩盖原型上的），然则关于援用范例来讲就是比较突出的题目了（修正一个，其他的也会被修正）。别的，这个形式省略了为组织函数传参的轻易。

5、组织函数形式和原型形式组合运用

function Person(name, age){
    this.name = name;
    this.age = age;
}
Person.prototype.getName = function(){
    alert(this.name);
}
var p = new Person("贝多芬", 200);

这类是比较通用的一种体式格局，连系了组织函数形式和原型形式的长处，然则这类体式格局能够关于写OO言语的人来讲，有点儿不友好，毕竟这类写法有点儿奇特。

6、动态原型形式

function Person(name, age){
    this.name = name;
    this.age = age;
    if (typeOf this.sayName !== "function") {
        Person.prototype.sayName = function(){
            alert(this.name);
        }
    }
}

这类形式的优点是把一切的属性全部都封装到一个函数内里，然则会对函数做一个检测，没有的情况下才会去建立

7、寄生组织函数形式

function Person(name, age){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.printName = function(){
        console.log(this.name);
    }
    return o;
}
var p = new Person("贝多芬", 55);

这个形式的一个实用场景是改写原生的对象

8、运用es6

class Person {
    constructor(name){
        this.name = name;
    }
    printName(){
        console.log(this.name);
    }
}
const p = new Person("巴菲特")