JavaScript高级程序设计（第三版）学习笔记第6章

面向对象的程序设计

1.理解对象

1.1 属性类型

ECMAScript 中有两种属性：数据属性和访问器属性、

1. 数据属性
数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有4个描述其行为的特性
Configurable - 表示能否通过delete删除属性从而重新定义属性，能否修改属性的特征，或者能否把属性修改为访问器属性，默认值为true
Enumerable - 示能否通过for-in循环返回属性，默认值为true
Writeable - 能否写入
Value - 包含这个属性的数据值，写入属性的时候把值存在这，默认值为 undefined

Object.defineProperty() - 修改默认特性

    var person = {}
    Object.defineProperty(person, "name", {
        writable: false,
        value: "limy"
    })
    console.log(person.name);   // limy
    person.name = "limy1"
    console.log(person.name);   // limy

2. 访问器属性

Configurable - 表示能否通过delete删除属性从而重新定义属性，能否修改属性的特征，或者能否把属性修改为访问器属性，默认值为true
Enumerable - 示能否通过for-in循环返回属性，默认值为true
Get - 读取属性时调用的函数
Set - 写入属性时调用的函数

访问器属性不能直接定义，需要通过Object.defineProperty()

var book = {
    _year: 2018,
    edition: 1
};
 
Object.defineProperty(book,"year", {
    get: function() {
        return this._year
    },
    set: function(newValue) {
        if(newValue > 2018) {
            this._year = newValue;
            this.edition += newValue - 2018;
        }
    }
});
 
book.year = 2019;
alert(book.edition); // 2

1.2 定义多个属性

var book = {};
Object.defineProperties(book,{
    _year: {
        writable: true,
        value: 2004
    },
    edition: {
        writable: true,
        value: 1
    },
    year: {
        get: function() {
            return this._year
        },
        set: function(newValue) {
            if(newValue > 2004) {
                this._year = newValue;
                this.edition += newValue - 2004;
            }
        }
    }
});

1.3 读取属性的特性

var descriptor = Object.getOwnPropertyDescriptor(book,"year");
alert(descriptor.value); // undefined
alert(descriptor.enumerable); // false
alert(typeof descriptor.get); // "function"

2. 创建对象

2.1 工厂模式

解决了创建多个相似对象的问题，但是不能分辨出一个对象的类型

function createPerson(name,age, job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function() {
        alert(this.name);
    };
    return o;
}
 
var person1 = createPerson("Nicholas","29","sofaware Engineer");
var person2 = createPerson("Greg",27,"Doctor");

2.2 构造函数模式

• 构造函数的函数名称必须是大写
• 创建一个实例需要使用new操作符，这种方式会经历四个步骤
  1. 创建一个新的对象
  2. 将构造函数的作用域赋给新对象（this 指向这个新对象）
  3. 为这个对象添加属性
  4. 返回新对象

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

// constructor（构造函数）属性
alert(person1.constructor == Person); // true
alert(person2.constructor == Person); // true

// 检测对象类型
alert(person1 instanceof Object); // true
alert(person1 instanceof Person); // true
alert(person2 instanceof Object); // true
alert(person2 instanceof Person); // true

1. 构造函数当作普通函数

不加 new 操作符，构造函数指向 window

Person("Greg",27,"Doctor");
window.sayName();	// Greg

2. 构造函数的问题

在创建不同的对象时，会创建多个功能函数(完成同一个任务，sayName)

2.3 原型模式

prototype - 原型

function Person() {
    
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.sayName = function() {
    alert(this.name);
};
var person1 = new Person();
person1.sayName(); // "Nicholas"
var person2 = new Person();
person2.sayName(); // "Nicholas"
 
alert(person1.sayName == person2.sayName); // true

【转】帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）

1. 组合使用构造函数模式和原型模式

function Person (name,age,job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby","Court"];
}
Person.prototype = {
    constructor: Person,
    sayName: function() {
        alert(this.name);
    }
}
var person1 = new Person("Nicholas",29,"software Engineer");
var person2 = new Person("Greg",27,"Doctor");
 
person1.friends.push("Van");
alert(person1.friends); // "shelby,count,Van"
alert(person2.friends); // "Shelby,count"
alert(person1.friends === person2.friends); // false
alert(person1.sayName === person2.sayName); // true

3. 继承

子类继承父类的属性和方法

3.1 原型继承

实现： 让父类中的属性和方法在子类的原型链上

	Child.prototype = new Parent();
	Child.prototype.constructor = Child;

特点：

1. 其他语言的继承是拷贝继承（将父类的属性和方法拷贝一份到子类），而js是基于__proto__原型链的查找机制
2. 子类可以重写父类的方法（由于改变原型链，会导致其他实例受到影响）

	Child.prototype.__proto__.sum = function(){}

3. 父类中私有和共有的属性、方法都会变成子类的公有属性、方法

3.2 call 继承

实现： 子类的方法中把父类当作普通函数来执行，通过 call 方法改变指向（由window 变为 子类的this），相当于给子类的实例设置了方法

        function Person(){
            this.name = "person";
        }
        Person.prototype.say=function(){
            console.log(this.name);
        }
        function Child(){
            Person.call(this);
        }
        var a = new Child();
        console.log(a.name);    // person

特点：

1. 只能继承父类的私有方法和属性
2. 父类的私有变为子类的私有

3.3 寄生组合继承

实现： call 继承 + 类似于原型继承
Object.creat(obj) - 创建一个空对象，使这个空对象的 __proto__ 属性指向 obj

	// creat 函数原理
    Object.create = function (obj){
        function Fn(){};	// 临时构造函数
        Fn.prototype = obj	// 构造函数的原型等于传入的对象
        return new Fn()		// 通过构造函数创建一个实例对象并返回
    }

	// 继承私有属性、方法
    function Child(){
        Person.call(this);
    }
	// 继承公有
	Child.prototype = Object.create(Person.prototype);
	Child.prototype.constructor = Child;

特点： 父类的共有是子类的共有，父类的私有是子类的私有