码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript继承

时间:2018-06-09 00:51:37      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:func   end   对象创建   ola   寄生式继承   job   on()   red   new   

JavaScript高级程序设计 --- 6.面向对象的程序设计

这一章看到后头有点儿乱,在这里打打代码帮助自己理解。

1. 理解对象

var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.job = "Software Engineer";

person.sayName = function() {
    alert(this.name);
};

or 

var person = {
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",

    sayName: function() {
        alert(this.name);
    }
}

1.1 属性类型(貌似不怎么用得到)

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, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

 

2.2 构造函数模式(使用ECMAScript中的构造函数来创建特定类型的对象)

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");

 使用new操作符调用构造函数会经历4个步骤:

    a. 创建一个新对象;

    b. 将构造函数的作用域赋给新对象;

    c. 执行构造函数中的代码;

    d. 返回新对象;

缺点:每个方法都要在新的实例上重新创建一遍!

 

2.3 原型模式(将对象的信息直接添加到原型对象中)

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();

 

* "hasOwnProperty" does not go into prototype to search, while "in" operator does.

缺点:所有实例在默认情况下属性值都相同。

 

2.4 组合使用构造函数模式和原型模式(组合使用,构造函数用于定义实例属性,原型模式用于定义方法和共享的属性)

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 === person2.friends);              // false
alert(person1.sayName === person2.sayName);       // true

 

2.5 动态原型模式(通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型)

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

 

2.6 寄生构造函数模式(在特殊情况下为对象创建构造函数)

function Person(name, age, job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function() {
        alert(this.name);    
    }; 

    return o;
}    

 

2.7 稳妥构造函数模式(没有公共属性,也不引用this的对象,在方法中直接使用参数)

function Person(name, age, job)  {
    var o = new Object();
    o.sayName = function() {
        alert(name);
    };

    return o;
}

 

3 继承

3.1 原型链

利用原型让一个引用类型继承另一个引用类型的属性和方法。

 

3.2 借用构造函数

function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

function SubType() {
    superType.call(this, "Nicholas");

    this.age = 29;
}

 

3.3 组合继承(使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承)

function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function() {
    alert(this.name);
}

function SubType(name, age) {
    SuperType.call(this, name);

    this.age = age;
}

SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
    alert(this.age);
};

 

3.4 原型式继承

function objecct(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

 

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

alert(person.friends);

 

3.5 寄生式继承

function createAnother(original) {
    var clone = object(original);
    clone.sayHi = function() {
         alert("hi");
    };
    return clone;
}

 

3.6 寄生组合式继承

function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function() {
    alert(this.name);
};

function SubType(name, age) {
    SuperType.call(this, name);

    this.age = age;
}

SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
    alert(this.age);
};

 

JavaScript继承

标签:func   end   对象创建   ola   寄生式继承   job   on()   red   new   

原文地址:https://www.cnblogs.com/easybreezy/p/9153456.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!