资讯专栏INFORMATION COLUMN

面向对象

MageekChiu / 2371人阅读

摘要:这个做法借鉴自其他语言,主要是为了区别于中的其他函数因为构造函数本身也是函数,只不过可以用来创建对象而已。

面向对象的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象

创建对象

虽然Object构造函数或者对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量重复代码(为什么或产生大量重复的代码?)。

工厂模式

</>复制代码

  1. function createPerson(name, age, job){
  2. var o = new Object();
  3. o.name = name;
  4. o.age = age;
  5. o.job = job;
  6. o.sayName = function(){
  7. alert(this.name);
  8. };
  9. return o;
  10. }
  11. var person1 = createPerson("Nicholas", 29, "Software Engineer");
  12. var person2 = createPerson("Greg", 27, "Doctor");

工厂模式的特点:解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即怎么知道一个对象的类型);

构造函数模式

构造函数始终都应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头。这个做法借鉴自其他 OO 语言,主要是为了区别于 ECMAScript中的其他函数;因为构造函数本身也是函数,只不过可以用来创建对象而已。

</>复制代码

  1. function Person(name, age, job){
  2. this.name = name;
  3. this.age = age;
  4. this.job = job;
  5. this.sayName = function(){
  6. alert(this.name);
  7. };
  8. }
  9. var person1 = new Person("Nicholas", 29, "Software Engineer");
  10. var person2 = new Person("Greg", 27, "Doctor");

要创建 Person 的新实例,必须使用 new 操作符。这中方式调用构造函数实际上回会经历4个步骤

创建一个对象

将构造函数的作用域赋给新对象(因此this就指向了这个新对象)

执行构造函数中的代码(为这个新对象添加属性)

返回新对象

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

原型模式

每一个函数都有一个 prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以有特定类型的所有实例共享的属性和方法。

</>复制代码

  1. function Person(){
  2. }
  3. Person.prototype.name = "Nicholas";
  4. Person.prototype.age = 29;
  5. Person.prototype.job = "Software Engineer";
  6. Person.prototype.sayName = function(){
  7. alert(this.name);
  8. };
  9. var person1 = new Person();
  10. person1.sayName(); //"Nicholas"
  11. var person2 = new Person();
  12. person2.sayName(); //"Nicholas"
  13. alert(person1.sayName == person2.sayName); //true

新对象的这些属性和方法是由所有实例共享的。换句话说,person1 和 person2 访问的都是同一组属性和同一个 sayName()函数

理解原型对象

构造函数、原型和实例的关系:每个构造函数都有一个原型对象(prototype属性),原型对象都包含一个指向构造函数的指针(constructor(构造函数)属性),而实例有包含一个指向原型对象的内部指针([[Prototype]]、Firefox、Safari 和 Chrome 在每个对象上都支持一个属性__proto__)

更简单的原型语法

</>复制代码

  1. function Person(){
  2. }
  3. Person.prototype = {
  4. constructor : Person, //
  5. name : "Nicholas",
  6. age : 29,
  7. job: "Software Engineer",
  8. sayName : function () {
  9. alert(this.name);
  10. }
  11. };

本质上完全重写了默认的 prototype 对象,因此 constructor 属性也就变成了新对象的 constructor 属性(指向 Object 构造函数),不再指向 Person 函数。所以需要手动设置 constructor 属性,并将它的值设置为 Person,确保通过该属性能够访问到适当的值。

原型与in操作符 原型的动态性 原生对象的原型

原型模式的重要性不仅体现在创建自定义类型方面,就连所有原生的引用类型,都是采用这种模式创建的。所有原生引用类型(Object、Array、String等)都在期构造函数的原型定义了方法。例如,在Array.prototype中可以找到sort()方法,而在String.prototype中可以找到substring()方法。

</>复制代码

  1. alert(typeof Array.prototype.sort); //"function"
  2. alert(typeof String.prototype.substring); //"function"

通过原生对象的原型,不仅可以取得所有默认方法的引用,而且也可以定义新方法。可以像修改自定义对象的原型一样修改原型对象的原型,因此可以随时添加方法。下面的代码就给基本包装类型String添加了一个名为 startsWith()的方法。

</>复制代码

  1. String.prototype.startsWith = function (text) {
  2. return this.indexOf(text) == 0;
  3. };
  4. var msg = "Hello world!";
  5. alert(msg.startsWith("Hello")); //true
原型对象的问题

缺点:

因为省略了为构造函数传递初始化参数这一环节,结果所有在默认情况下都将取得相同的属性值

最大问题是由其共享的本性所导致的。

原型中所有属性是被很多实例共享的,这种共享对于函数非常合适。对于那些包含基本值的属性倒也说的过去,毕竟(如前面的例子所示),通过在实例上添加同一个同名属性,可以隐藏在原型中的对应属性。然而,对于包含引用类型值的属性来说,问题就比较突出了。

</>复制代码

  1. function Person(){
  2. }
  3. Person.prototype = {
  4. constructor: Person,
  5. name : "Nicholas",
  6. age : 29,
  7. job : "Software Engineer",
  8. friends : ["Shelby", "Court"],
  9. sayName : function () {
  10. alert(this.name);
  11. }
  12. };
  13. var person1 = new Person();
  14. var person2 = new Person();
  15. person1.friends.push("Van");
  16. alert(person1.friends); //"Shelby,Court,Van"
  17. alert(person2.friends); //"Shelby,Court,Van"
  18. alert(person1.friends === person2.friends); //true
继承 原型链

基本思想:利用原型让一个引用类型继承另一个类型的属性和方法。

</>复制代码

  1. function SuperType(){
  2. this.property = true;
  3. }
  4. SuperType.prototype.getSuperValue = function(){
  5. return this.property;
  6. };
  7. function SubType(){
  8. this.subproperty = false;
  9. }
  10. //继承了 SuperType
  11. SubType.prototype = new SuperType();
  12. SubType.prototype.getSubValue = function (){
  13. return this.subproperty;
  14. };
  15. var instance = new SubType();
  16. alert(instance.getSuperValue()); //true

原型的搜索机制:当以读取模式方式访问一个实例属性时,首先会在实例中搜索该属性。如果没有找到改属性,则会继续搜索实例的原型。在通过原型链实现继承的情况,搜索过程就得以沿着原型链继续向上。在找不到属性或方法的情况下,搜索过程是要一环一环地前行到原型链末端才会停下来。

默认的原型

我们引用类型默认都继承了Object,而这个继承也是通过原型链实现的。大家要记住,所有函数的默认原型都是Object的实例,因此默认原型都会包含一个内部指针,指向Object.prototype。这也正式所有自定义类型都会继承toString()、valueOf()等默认方法的根本原因。
完整的原型链:

原型链的问题

主要问题来自于包含引用类型的原型(引用类型值的原型属性会被所有实例共享)。在通过原型来实现继承时,原型实际上回变成另一个类型的实例。于是,原先的实例属性也就顺理成章地变成了现在的原型属性了。

</>复制代码

  1. function SuperType(){
  2. this.colors = ["red", "blue", "green"];
  3. }
  4. function SubType(){
  5. }
  6. //继承了 SuperType
  7. SubType.prototype = new SuperType();
  8. var instance1 = new SubType();
  9. instance1.colors.push("black");
  10. alert(instance1.colors); //"red,blue,green,black"
  11. var instance2 = new SubType();
  12. alert(instance2.colors); //"red,blue,green,black"

原型链的第二个问题是:在创建子类型的实例时,不能向超类型的构造函数中传递参数。实际上,应该说是没有办法在不影响所有对象实例的情况下,给超类型的构造函数传递参数。有鉴于此,在加上前面刚刚讨论过的由于原型中包含引用类型值所带来的问题,实践中很少会多带带使用原型链。

借用构造函数

基本思想:在子类型构造函数的内部调用超类型构造函数。通过apply()和call()方法也可以在(将来)新创建的对子那个上执行构造函数

</>复制代码

  1. function SuperType(){
  2. this.colors = ["red", "blue", "green"];
  3. }
  4. function SubType(){
  5. //继承了 SuperType
  6. SuperType.call(this);
  7. }
  8. var instance1 = new SubType();
  9. instance1.colors.push("black");
  10. alert(instance1.colors); //"red,blue,green,black"
  11. var instance2 = new SubType();
  12. alert(instance2.colors); //"red,blue,green"
优点

传递参数.借用构造函数可以在子类型构造函数中向超类型构造函数传递参数

</>复制代码

  1. function SuperType(name){
  2. this.name = name;
  3. }
  4. function SubType(){
  5. //继承了 SuperType,同时还传递了参数
  6. SuperType.call(this, "Nicholas");
  7. //实例属性
  8. this.age = 29;
  9. }
  10. var instance = new SubType();
  11. alert(instance.name); //"Nicholas";
  12. alert(instance.age); //29
问题

构造函数存在的问题——方法都在构造函数定义,因此函数就无法复用。而且在超类型的原型中定义方法,对子类型而言也是不可见的,结果所有类型都只能在使用构造函数模式

组合继承

组合继承:有时候也叫伪经典继承,指的是将原型链和借用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式。
基本思想: 使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,即通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。

</>复制代码

  1. function SuperType(name){
  2. this.name = name;
  3. this.colors = ["red", "blue", "green"];
  4. }
  5. SuperType.prototype.sayName = function(){
  6. alert(this.name);
  7. };
  8. function SubType(name, age){
  9. //继承属性
  10. SuperType.call(this, name);
  11. this.age = age;
  12. }
  13. //继承方法
  14. SubType.prototype = new SuperType();
  15. SubType.prototype.constructor = SubType;
  16. SubType.prototype.sayAge = function(){
  17. alert(this.age);
  18. };
  19. var instance1 = new SubType("Nicholas", 29); instance1.colors.push("black");
  20. alert(instance1.colors); //"red,blue,green,black"
  21. instance1.sayName(); //"Nicholas";
  22. instance1.sayAge(); //29
  23. var instance2 = new SubType("Greg", 27);
  24. alert(instance2.colors); //"red,blue,green"
  25. instance2.sayName(); //"Greg";
  26. instance2.sayAge(); //27

instanceof 和 isPrototypeOf()也能够用于识别基于组合继承创建的对象

小结

ECMAScript 支持面向对象(OO)编程,但不使用类或者接口。对象可以在代码执行过程中创建和增强,因此具有动态性而非严格定义的实体。在没有类的情况下,可以采用下列模式创建对象。

工厂模式,使用简单的函数创建对象,为对象添加属性和方法,然后返回对象。这个模式后来被构造函数模式所取代。

构造函数模式,可以创建自定义引用类型,可以像创建内置对象实例一样使用new操作符。不过,构造函数模式也有缺点,即它的每个成员都无法得到复用,包括函数。由于函数可以不局限于任何对象(即与对象具有松散耦合的特点),因此没有理由在多个对象间共享函数。

原型模式,使用构造函数的prototype属性来指定那些应该共享的属性和方法。组合使用构造函数模式和原型模式时,使用构造函数定义实例属性,而使用原型定义共享的属性和方法。

JavaScript主要通过原型链实现继承。原型链的构建是通过讲一个类型的实例赋值给另一个构造函数的原型实现的。这样,子类型就能够访问超类型的所有属性和方法,这一点与基于类的继承很相似。原型链的问题是对象实例共享所有继承的属性和方法,因此不适宜多带带使用。解决这个问题的技术是借用构造函数,即在子类型构造函数的内部调用超类型构造函数。这样就可以做到每个实例都具有自己的属性,同时还能保只使用构造函数模式来定义类型。使用最多的继承模式是组合继承,这种模式使用原型链继承共享的属性和方法,而通过借用构造函数继承实例属性。
此外,还存在下列可供选择的继承模式。

原型式继承,可以在不必预先定义构造函数的情况下实现继承,其本质是执行对给定对象的浅复制。而复制得到的副本还可以得到进一步改造。

寄生式继承,与原型式继承非常相似,也是基于对象或某些写信创建一个对象,然后增强对象。最后返回对象。为了解决组合继承模式由于多次调用超类型构造函数而导致的低效率问题,可以将这个模式与组合继承一起使用。

寄生组合式继承,集寄生式继承和组合继承的有点与一身,是实现基于类型继承的最有效方式

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103549.html

相关文章

  • SegmentFault 技术周刊 Vol.32 - 七夕将至,你的“对象”还好吗?

    摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...

    李昌杰 评论0 收藏0
  • SegmentFault 技术周刊 Vol.32 - 七夕将至,你的“对象”还好吗?

    摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...

    Lyux 评论0 收藏0
  • SegmentFault 技术周刊 Vol.32 - 七夕将至,你的“对象”还好吗?

    摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...

    AaronYuan 评论0 收藏0
  • 再和“面向对象”谈恋爱 - 面向对象编程概念(三)

    摘要:说到底面向对象才是程序语言的根本。其实面向对象编程说的就是自定义对象。里并没有类的概念,所以严格上来讲这是个假的面向对象里的面向对象编程现在好了,终于听到别人鄙视我们了,给我们提供了类这个概念,其实是向传统语言更靠齐了。 通过前两篇文章,我们了解了对象的概念以及面向对象里的相关概念等知识,那前面说了对象分类里的前两种,这篇文章要详细去说第三种自定义对象,那真正的好戏这就来了! 面向对象...

    Cruise_Chan 评论0 收藏0
  • 面向对象 方法

    摘要:面向对象的思想已经涉及到软件开发的各个方面。面向对象的程序设计是将数据成员和属于此数据的操作方法放在同一实体或对象中,就是封装。 面向对象 什么是面向对象...

    widuu 评论0 收藏0
  • javascript 面向对象版块之理解对象

    摘要:用代码可以这样描述安全到达国外面向过程既然说了面向对象,那么与之对应的就是面向过程。小结在这篇文章中,介绍了什么是面向对象和面向过程,以及中对象的含义。 这是 javascript 面向对象版块的第一篇文章,主要讲解对面向对象思想的一个理解。先说说什么是对象,其实这个还真的不好说。我们可以把自己当成一个对象,或者过年的时候相亲,找对象,那么你未来的老婆也是一个对象。我们就要一些属性,比...

    lovXin 评论0 收藏0

发表评论

0条评论

MageekChiu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<