ES5中的对象冒充继承与原型继承

2020-11-26 14:52:58 浏览数 (1)

1. 最简单的类，构造函数

代码语言：javascript复制
function Person(name, age) {
    this.name = name;
    this.age = age;
};
// 实例化一个方法
var p = new Person('Augus', 18);
console.log(`${p.name}--${p.age}`);
// Augus--18

2. 构造函数和原型链里面增加方法

代码语言：javascript复制
// 构造函数上面的属性值不会被多个实例共享
function Person(name, age) {
    // 定义属性
    this.name = name;
    this.age = age;
    // 定义方法
    this.say = function () {
        console.log('My name is '   name);
    }
};

// 原型链上的面的属性和方法会被多个实例共享
Person.prototype.sex = '男';
Person.prototype.run = function () {
    console.log('I am running');
};
// 实例化
var p = new Person('Augus', 20);

console.log(p.name);
// Augus
console.log(p.age);
// 20
p.say();
// My name is Augus

console.log(p.sex);
// 男
p.run();
// I am running

3. 类里面的静态方法

代码语言：javascript复制
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.say = function () {
        console.log('Hello world');
    }
};
Person.sex = '男';
Person.getInfo = function () {
    console.log('我是一个静态方法');
};

// 调用静态方法
console.log(Person.sex);
// 男
Person.getInfo();
// 我是一个静态方法

4. ES5里面的继承，对象冒充实现继承

代码语言：javascript复制
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.say = function () {
        console.log('My name is '   name);
    }
};
Person.prototype.sex = '男';
Person.prototype.getInfo = function () {
    console.log('这是原型链上的一个方法');
};

// 定义一个新的方法
function Web() {
    // 对象冒充继承
    Person.call(this, 'Augus', 18);
};

// 对象冒充可以继承构造函数里面的属性和方法
var web = new Web();
console.log(web.name);
// Augus
console.log(web.age);
// 18
web.say();
// My name is Augus


// 对象冒充没法继承原型链上的属性和方法。
console.log(web.sex);
// undefined
web.getInfo();
// 报错 web.getInfo is not a function

5. ES5里原型链的继承，既可以实现构造函数的继承又可以实现原型链的继承

代码语言：javascript复制
function Person() {
    this.name = 'Augus';
    this.age = 20;
    this.say = function () {
        console.log('My name is Augus');
    }
};

Person.prototype.sex = '男';
Person.prototype.getInfo = function () {
    console.log('这是原型链上的一个方法');
};
function Web() {


};
// 原型链实现继承
Web.prototype = new Person();

// 可以继承构造函数里面的属性和方法
// 也可以继承原型链上面的属性和方法。
var web = new Web();

console.log(web.name);
// Augus
console.log(web.age);
// 20
web.say();
// My name is Augus
console.log(web.sex);
// 男
web.getInfo();
// 这是原型链上的一个方法

6. ES5中，原型链继承存在的问题，实例化子类没法给父类传值

代码语言：javascript复制
function Person(name, age) {
    this.name = name;
    this.age = age
    this.say = function () {
        console.log('My name is '   name);
    }
};
Person.prototype.sex = '男';
Person.prototype.getInfo = function () {
    console.log('这是原型链上的一个方法');
};

var p = new Person('Augus', 20);

console.log(p.name);
// Augus
console.log(p.age);
// 20
// 可以传参


function Web(name, age) {

};
Web.prototype = new Person();

var web = new Web('Jack', 20);
console.log(web.name);
// undefined
console.log(web.age);
// undefined
// 实例化的子类没法给父类传值

7. 原型链 构造函数的组合继承模式，可以实例化子类向父类传值

代码语言：javascript复制
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.say = function () {
        console.log('My name is '   name);
    }
};
Person.prototype.sex = '男';
Person.prototype.getInfo = function () {
    console.log(this.name   '这是原型链里的方法');
};
function Web(name, age) {
    // 对象冒充继承，可以继承构造函数里面的属性和方法，实例化子类可以给父类传值
    Person.call(this, name, age);
};
Web.prototype = new Person();
var web = new Web('Augus', 20);

console.log(web.name);
// Augus
console.log(web.age);
// 20
web.say();
// My name is Augus
web.getInfo();
// Augus 这是原型链里的方法

8. 原型链 构造函数的组合继承模式的另一种写法

代码语言：javascript复制
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.say = function () {
        console.log('My name is '   name);
    }
};
Person.prototype.sex = '男';
Person.prototype.getInfo = function () {
    console.log(this.name   '这是原型链里的方法');
};

function Web(name, age) {
    Person.call(this, name, age);
};
Web.prototype = Person.prototype;
var web = new Web('Augus', 20);

console.log(web.name);
// Augus
console.log(web.age);
// 20
web.say();
// My name is Augus
web.getInfo();
// Augus 这是原型链里的方法
面向对象编程 ecmascript

0 人点赞