Javascript中的面向对象

什么是对象？

• 对象是由属性和方法构成
• 属性, 事物的特征
• 方法, 事物的行为

创建对象的几种方式

• 字面量方式

let person = {
  name: "张三",
  age: 11
}
缺点: 代码不能复用

• 工厂模式

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; 
} 
1. 解决了代码复用的问题
2. 但是没有解决对象识别问题, 就是怎么知道一个对象的类型

• 构造函数模式
  1.函数首字母大写，用于区分构造函数和普通函数
  2.创建对象的过程是由new关键字实现
  3.在构造函数内部会自动创建新对象，并赋值给this指针
  4.自动返回创建出来的对象

function Person(name, age){ 
    //这里会自动创建一个对象，var this = new Object();
    this.name = name; 
    this.age = age; 
    this.sayName = function(){ 
        alert(this.name); 
    }; 
    //返回值
    //不写, 直接返回默认创建的新对象
    //返回this, 直接返回默认创建的新对象
    //返回基本数据类型, 直接返回默认创建的新对象
    //返回的是对象, 直接返回这个对象
    return this; 
} 
var person1 = new Person("Nicholas", 29); 
var person2 = new Person("Greg", 27);
问题: 每个方法都要在每个实例上重新创建一遍, 浪费内存

• 原型模式

function Person(){ 
} 
Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 
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

• 构造函数/原型组合模式(推荐使用)

1. 构造函数定义实例属性, 原型模式定义方法和共享的属性
2. 每个实例都会有自己的一份实例属性的副本, 同时又共享着方法的引用, 最大限度节省了内存

function Person(name, age, job){ 
    this.name = name; 
    this.age = age; 
    this.job = job; 
    this.friends = ["Shelby", "Court"]; 
} 
Person.prototype = { 
    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 

• 终极版

function Person(options){
    this._init(options);
}
Person.prototype = {
    options = options | {};
    _init: function(options){
        this.name = options.name; 
        this.age = options.age || 0; 
        this.job = options.job; 
    },
    sayName: function(){
         alert(this.name); 
    }
}

示例: 封装一个矩形
rect.js

//构造函数方式创建对象
        function Rect(options){
            this._init(options);
        }
        Rect.prototype = {
            _init: function(options){
                options = options || {};
                this.root = options.root;
                this.left = options.left || 0;
                this.top = options.top || 0;
                this.width = options.width || 0;
                this.height = options.height || 0;
                this.bgColor = options.bgColor || '#000';
                this.borderRadius = options.borderRadius || 0;
                this.border = options.border;
            },
            reader: function(){
                var rootElement = document.getElementById(this.root);
                var childElement = document.createElement('div');
                rootElement.appendChild(childElement);
                childElement.style.position = 'absolute';
                childElement.style.left = this.left + 'px';
                childElement.style.top = this.top + 'px';
                childElement.style.width = this.width + 'px';
                childElement.style.height = this.height + 'px';
                childElement.style.backgroundColor = this.bgColor;
                childElement.style.border = this.border;
                childElement.style.borderRadius = this.borderRadius;
            }
        }

效果图

矩形

对象属性

• 获取或设置属性

定义对象
let person = {
  name: "test"
}
获取属性
console.log(person.name);
console.log(person['name'];
设置属性
person.name = "张三";
person['name'] = "张三";
注: 上面使用了点语法和[]语法获取和设置属性, 另外需要注意一点就是点语法后面不能跟关键字、保留字或数字

• 清空属性

person = {}; // person对象不再有任何属性
person = null; // person不再是一个对象了

• hasOwnProperty和in

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

Person.prototype.address = "郑州";
let p = new Person("lisi", 11);

console.log(p.hasOwnProperty('name'))    //true
console.log(p.hasOwnProperty('address'));//false

console.log('name' in p);    //true
console.log('address' in p); //true

• isPrototypeOf和instanceOf

function Person() {
}

let p = new Person();
console.log(Person.prototype.isPrototypeOf(p));  //true
console.log(p.__proto__.isPrototypeOf(p));       //true

console.log(p instanceof Person); //true

• 获取对象属性名

let person = {
  name:"张三",
  age: 11
}
let keys = Object.keys(person);
console.log(keys); / //['name', 'age']

• 设置或修改对象中的属性

Object.defineProperty(
    对象, 
    修改或新增的属性名, 
    { 
        value: 修改或新增的属性的值, 
        writable: true/false, // false代表, 不允许修改这个属性值 
        enumerable: false,  // false, 不允许遍历
        configurable: false // false, 不允许删除这个属性
    }
)

对象的静态属性和静态方法

function Person(name, age) {
    this.name = name;
    this.age = age;
    if(!Person.personCount){
        Person.personCount = 0;
    }
    Person.personCount ++;
}

//输出一共创建多少个Person实例对象
Person.printPersonCount = function () {
    console.log(Person.personCount);
}

var p1 = new Person("zhangsan", 11);
var p2 = new Person("lisi", 12);
Person.printPersonCount(); //2

获取对象类型

var obj = {"name": "zhangsan"};
var arr = [1, 2, 4];
console.log(typeof obj);      //object
console.log(obj.toString());  //[object Object]
console.log(typeof arr);      //object, 无法获取正确的对象类型
console.log(arr.toString());  //1,2,4, 无法获取正确的对象类型
console.log(Object.prototype.toString.call(arr));   //[object Array]
console.log(arr.constructor.name); //Array

验证对象类型

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

var p = new Person('lisi', 18);

console.log(p instanceof Person); //true
console.log(p instanceof Object); //true
console.log(p instanceof Array); //false
console.log(p); //Person { name: 'lisi', age: 18 }

原型对象

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

Person.prototype.say = function () {
    console.log("say...");
}

//方式1
console.log(Person.prototype);

//方式2
let p = new Person("lisi", 11);
console.log(p.__proto__);

let o = {
    'study': function () {
        console.log("study...")
    }
}
p.__proto__ = o;
console.log(p.__proto__);

继承

• 什么是继承?
  通过某种方式让一个对象可以访问到另外一个对象的方法和属性
• 为什么使用继承?
  避免同一方法多次声明导致内存浪费

function  Person(){
    this.say=function(){
        console.log("你好")
    }
}
var  p1=new  Person();
var  p2=new  Person();
console.log(p1.say == p2.say); //false， 内存浪费

怎么解决？ 把say方法写到他们共同的父类中

Person.prototype.say = function(){ console.log("你好"); }
console.log(p1.say == p2.say);  //true,指向了同一方法，避免了内存浪费
console.log(p1.say == Person.prototype.say); //true
这个地方用到了prototype(原型)对象, 只要在构造函数的原型对象中添加属性和方法, 那么这样的属性和方法就可以被所有的构造
函数的实例所共享, 这里的构造函数的prototype对象称为原型对象

插个小问题
p1, p2的原型对象是谁？
Person创建了p1和p2, 所有Person.prototype就是p1和p2的原型对象
那Person的原型对象是谁?
Function创建了Person, 所以Function.prototype是Person的原型

• 怎么继承？

1. 原型链继承

Person.prototype.say = function(){}
缺点: 方法多了会导致代码冗余

Person.prototype={
    constructor:Person, 
    say:function(){
        console.log("你好");
    },
    run:function(){
        console.log("正在进行百米冲刺");
    }
}
注:
1. 先改变原型，再创建对象
2. 对于新原型，会添加一个constructor属性，从而不破坏原有的原型对象结构

2. 借用构造函数方式
   场景: 2中构造函数之间逻辑有相似之处
   原理: 函数的call、apply调用方式

function Animal(name, age){
    this.name = name;
    this.age = age;
}
function Person(name, age, gender){
    Animal.call(this, name);
    //Animal.apply(this, name); 跟call等价
    this.gender = gender;
}