面向对象、创建对象、原型链、继承

面向对象

• 类: 对象的类型模板.
• 对象(实例): 是根据类创建的具体的对象.
• 对象由属性和方法组成.
• 属性: 对象的特征描述, 比如姓名, 年龄.
• 方法: 对象的行为, 比如吃饭, 睡觉, 撸代码.
• 面向对象三大特征: 封装, 继承, 多态.

创建对象

• 字面量创建对象: 使用json形式创建对象, 适用于创建单个对象.

// 字面量创建对象: 使用json形式创建对象, 适用于创建单个对象.
// json: js对象表示法, 由键值对组成, 每一个键值对之间使用冒号连接, 每一对键值对之间使用逗号隔开. { k1: v1, k2: v2 ... }
var obj = {
    name: '妲己',
    age: 18,
    sayhi: function () {
        console.log('请尽情吩咐妲己');
    }
};
console.log(obj);
console.log(typeof obj); // object
console.log(obj.age);
console.log(obj['age']);
obj.sayhi();

• 实例创建对象

// 实例创建对象, 使用 new Object() 创建一个实例对象, 再给该对象添加属性和方法
var obj = new Object(); // 创建一个实例对象
console.log(obj);

obj.name = '狄仁杰'; // 给对象添加属性
obj.age = 20;
console.log(obj);

// 给对象添加方法
obj.sayhi = function () {
    console.log('元芳你怎么看');
}
console.log(obj);

• 工厂模式创建对象

// 工厂模式创建对象: 把创建对象以及给对象添加方法和属性的过程封装在函数中, 根据传入的不同的参数返回不同的对象
// 工厂模式创建对象解决了重复实例化的过程, 无法分辨对象是哪个类的实例对象.
// instanceof运算符: 检测一个对象是否是某个构造函数的实例, 返回值是Boolean.
function createObject (name, age) {
    
    
    // 创建对象
    var obj = new Object();

    // 给对象添加方法和属性
    obj.name = name;
    obj.age = age;
    obj.sayhi = function () {
    
    
        console.log('hi');
    }

    // 返回对象
    return obj;
}
var obj1 = createObject('lilei', 20);
var obj2 = createObject('hanmeimei', 20);
console.log(obj1, obj2);
console.log(obj1 instanceof Object); // true
console.log(obj2 instanceof Object); // true
console.log(obj2 instanceof createObject); // true

• 构造函数创建对象

// 构造函数
// 1.构造函数首字母大写(约定)
// 2.构造函数没有显式创建对象(没有 new Object())
// 3.直接把属性和方法绑定给内部的this对象
// 4.没有return语句,不用返回对象
// 5.创建对象时使用new运算符调用构造函数

// new的作用:
// 1.创建一个新对象
// 2.把构造函数作用域赋值给新对象(把this绑定给新对象)
// 3.执行构造函数中的代码(给对象添加属性和方法)
// 4.返回新对象
function People (name, age) {
    this.name = name;
    this.age = age;
    this.sayhi = function () {
        console.log('hi,我叫' + this.name + ', 我今年' + this.age);
    }
}

var obj = new People('lilei', 20);
console.log(obj); // People {name: "lilei", age: 20, sayhi: ƒ}
console.log(typeof obj); // object
console.log(obj.name);
obj.sayhi();

var obj1 = new People('hanmeimei',19);
obj1.sayhi();

• 原型创建对象

function People () {
    People.prototype.name = 'lilei';
    People.prototype.age = 20;
    People.prototype.sayhi = function () {
        console.log('hi');
    }
}
var obj1 = new People();
console.log(obj1); // People {}
console.log(obj1.name); // lilei
console.log(obj1.age); // 20
console.log(obj1.sayhi); // f

var obj2 = new People();
console.log(obj2);
console.log(obj2.name); // lilei
console.log(obj2.age); // 20
console.log(obj2.sayhi); // f

• 混合模式创建对象(构造函数+原型)

// 混合模式创建对象(构造函数+原型): 把可变的属性放在构造函数中, 把共有的方法写在原型上
function People (name, age) {
    
    
    this.name = name;
    this.age = age;
}
People.prototype.sayhi = function () {
    
    
    console.log('hi');
}
var lilei = new People('lilei', 20);
var lucy = new People('lucy', 20);
console.log(lilei, lucy); // People {name: "lilei", age: 20} People {name: "lucy", age: 20}
lilei.sayhi();
lucy.sayhi();
console.log(lilei.sayhi == lucy.sayhi); // true

• 动态混合模式创建对象

// 动态混合模式创建对象
function People (name, age) {
    this.name = name;
    this.age = age;

    // 判断sayhi方法是否存在,不存在就添加该方法
    if (typeof(this.sayhi) != 'function') {
        People.prototype.sayhi = function () {
            console.log('hi');
        }
    }
}
var lilei = new People('lilei', 20);
var lucy = new People('lucy', 20);
console.log(lilei, lucy); // People {name: "lilei", age: 20} People {name: "lucy", age: 20}
lilei.sayhi();
lucy.sayhi(); 
console.log(lilei.sayhi == lucy.sayhi); // true

call和apply

// call和apply: 改变this指向
// 区别: 传参时apply使用数组,call直接罗列
function fun () {
    console.log(this);
}
fun(); // window
var obj = {
    name: 'lilei',
    age: 20
}
fun.call(obj); // obj
fun.apply(obj); // obj

function sum (a, b) {
    console.log(this);
    console.log(a + b);
}
sum.call(obj, 10, 20);
sum.apply(obj, [10, 20]);

​

原型链

// 每个对象都有自己的原型对象, 原型对象也有自己的原型对象, 组成了链式结构, 称之为原型链.原型链的终点是Object的原型, 再往上为null.
function People(name, age) {
    this.name = name;
    this.age = age;
}
var xiaoming = new People('xiaoming', 7);
console.log(xiaoming.__proto__);
console.log(xiaoming.__proto__.__proto__);
console.log(xiaoming.__proto__.__proto__.constructor); // ƒ Object() { [native code] }
console.log(xiaoming.__proto__.__proto__.__proto__); // null

继承

• 原型链继承

// 原型链继承: 将父类的实例化对象赋值给子类的原型.
function People (name, age) {
    this.name = name;
    this.age = age;
}
function Student (name, age) {
    this.name = name;
    this.age = age;
}
// 继承的核心语句: 将父类的实例化对象赋值给子类的原型.
Student.prototype = new People();

// 给父类添加方法
People.prototype.hi = function () {
    console.log('hi');
}

// 给子类添加方法
Student.prototype.study = function () {
    console.log('good good study, day day up');
}

var xiaoming = new Student('xiaoming', 7);
console.log(xiaoming); // 08-原型链继承.html:33 Student {name: "xiaoming", age: 7}
console.log(xiaoming.name);
console.log(xiaoming.age);

xiaoming.study(); // 对象xiaoming没有study方法,可以在xiaoming的__proto__上找到
xiaoming.hi(); // 对象xiaoming没有hi方法,可以在xiaoming的__proto__的__proto__上找到

• 对象冒充继承

// 对象冒充继承: 在子类中直接调用父类的构造函数(不使用new), 使用call或者apply更改this指向. 注意: 只能获取父类构造函数中的属性和方法, 父类的原型上的属性和方法不能获取.
function People(name, age) {
    
     // 父类
    this.name = name;
    this.age = age;
    this.hi = function () {
    
    
        console.log('hi');
    }
}
function Student(name, age) {
    
     // 子类
    People.call(this, name, age); // 在子类中直接调用父类构造函数,并使用call更改this指向
}

People.prototype.run = function () {
    
    
    console.log('run');
}

Student.prototype.study = function () {
    
    
    console.log('study');
}

var xiaoming = new Student('xiaoming', 20);
console.log(xiaoming);
console.log(xiaoming.name);
console.log(xiaoming.age);
xiaoming.hi();
xiaoming.study();
xiaoming.run(); // Uncaught TypeError: xiaoming.run is not a function

• 组合继承(对象冒充+原型链)
• 寄生组合继承