标签: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); };
标签:func end 对象创建 ola 寄生式继承 job on() red new
原文地址:https://www.cnblogs.com/easybreezy/p/9153456.html