资讯专栏INFORMATION COLUMN

js面向对象及原型继承学习笔记。

CrazyCodes / 3471人阅读

摘要:将构造函数的作用域赋值给新的对象因此指向了这个新对象。以这种方式定义的构造函数是定义在对象在浏览器是对象中的。构造函数在不返回值的情况下,默认会返回新对象实例。在创建子类型的实例时,不能向超类型的构造函数中传递参数。

创建对象

虽然Object构造函数或对象字面量都可以用来创建单个对象,但是这些方式有明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码。为解决这个问题,人们开始使用工厂模式的一种变体。

工厂模式

工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程。考虑到ECMAScript中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的细节。

</>复制代码

  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. console.log(this.name)
  8. }
  9. return o;
  10. }
  11. var person1 = createPerson("Nicholas",29,"SoftWare");
  12. var person2 = createPerson("gres",27,"Doctor");

函数cretePerson()能够根据接受的参数来构建一个包含所有必要信息的Person对象。可以无数次的调用这个函数,而每次它都会返回一个包含三个属性一个方法的对象。工厂模式虽然解决了创建多个相似对象的问题,但是却没有解决对象识别问题。

构造函数模式

</>复制代码

  1. function Person(name,age,job){
  2. this.name = name;
  3. this.age = age;
  4. this.sayName = function(){
  5. console.log(this.name);
  6. }
  7. }
  8. var person1 = new Person("Nicholas",29,"Software");
  9. var person2 = new Person("gres",24,"Docotor");

在这个例子中,Person()函数取代了createPerson()函数。不同之处:

</>复制代码

  1. 1.没有显式的创建对象。
  2. 2.直接将属性和方法赋给了this对象。
  3. 3.没有return语句。

要创建Person实例必须使用new操作符。以这种方式调用构造函数实际上会经历以下4个步骤:

</>复制代码

  1. 1.创建一个对象。
  2. 2.将构造函数的作用域赋值给新的对象(因此this指向了这个新对象)。
  3. 3.执行构造函数中的代码。(为这个新对象添加属性)。
  4. 4.返回新的对象。

上面的例子:person1和person2分别保存着Person的一个不同的实例。 这两个对象都有一个constructor属性,该属性指向Person。

</>复制代码

  1. person1.constructor == Person//true
  2. person2.constructor == Person//true
  3. person1 instanceof Object;//true
  4. person1 instanceof Person;//true

创建自定义的构造函数意味着将来可以将它的实例标示为一种特定的类型;而这正是构造模式胜过工厂模式的地方。(以这种方式定义的构造函数是定义在Global对象(在浏览器是window对象)中的)。
构造函数与其它函数的唯一区别,就在于调用它们的方式不同。不过,构造函数毕竟也是函数,不存在定义构造函数的特殊语法。任何函数,只要通过new操作符来调用,那他就可以作为构造函数;任何函数,如果不通过new运算符调用,那它就跟普通函数没有区别。
构造函数的问题:

</>复制代码

  1. 使用构造函数的主要问题就是每个方法都要在每个实例上重新创建一遍。在上面的例子中,person1和person2都有一个名为sayName()的方法,但那两个方法不是同一个Function的实例。在js中函数也是对象,因此每定义一个函数,也就是实例化了一个对象。

</>复制代码

  1. function Person(name, age){
  2. this.name = name;
  3. this.age = age;
  4. this.sayName = new Function(console.log(this.name))
  5. }

从这个角度上看构造函数,更容易明白每个Perosn实例都包含一个不同的Function实例的本质。说明白些,以这种方式创建函数,会导致不同的作用域链和标识符解析,但是创建Function新实例的机制仍然相同。因此不同实例上的同名函数是不相等的。

</>复制代码

  1. console.log(person1.sayName==person2.sayName);//false.

然而,创建两个完成同样任务的Function实例没有必要;况且有this对象在,根本不用在执行代码前就把函数绑定到特定对象上面。因此,可以向下面这样,通过把函数定义转移到构造函数外部来解决这个问题。

</>复制代码

  1. function Person(name,age){
  2. this.name = name;
  3. this.age = age;
  4. this.sayName = sayName;
  5. }
  6. function sayName(){
  7. console.log(this.name)
  8. }
  9. var person1 = new Person("ll",24);
  10. var person2 = new Person("kk",25);
原型模式

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

</>复制代码

  1. function Person(){}
  2. Person.prototype.name = "ll";
  3. Person.prototype.age = 24;
  4. Person.prototype.sayName=function(){
  5. console.log(this.name)
  6. }
  7. var person1 = new Person();
  8. var person2 = new Person();

在此我们将sayName()方法和属性直接添加到Person的prototype属性中,构造函数变成了空函数。即使如此,也仍然可以通过调用构造函数来创建新的对象,而且新的对象还会具有相同的属性和方法。但与构造函数模式不同的是,新对象的属性和方法是由所有实例共享的。
理解原型对象:

</>复制代码

  1. 无论什么时候,只要创建了一个新函数,就会根据一定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor属性,这个属性是一个指向prototype属性所在函数的指针。Person.prototype.constructor指向Person。而通过这个构造函数,我们还可以继续为原型对象创建其它属性和方法。
  2. 创建了自定义构造函数之后,其原型对象默认只会得到constructor属性;至于其它属性和方法都是从Object对象继承而来的。当调用构造函数的一个新实例后,该实例内部将包含一个指针,指向构造函数的原型对象。(__proto__);person1和person2都包含一个内部属性,该属性仅仅指向了Person.prototype,和构造函数没有直接的关系。
  3. 每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性,搜索首先从对象实例本身开始,如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象,如果在原型对象中找到了该属性,则返回该属性的值。

</>复制代码

  1. function Person(){}
  2. Person.prototype.name = "ll";
  3. Person.prototype.age = 24;
  4. Person.prototype.sayName=function(){
  5. console.log(this.name)
  6. }
  7. var person1 = new Person();
  8. var person2 = new Person();
  9. person1.name = "kk";
  10. console.log(person1.name)//kk-来自实例
  11. console.log(person2.name)//ll来自原型

当对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性。

原型模式的缺点:

</>复制代码

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

</>复制代码

  1. function Person(){}
  2. Person.prototype={
  3. constructor:Person,
  4. name:"kk",
  5. age:24,
  6. friends:["ll","jj"],
  7. sayName:function(){
  8. console.log(this.name);
  9. }
  10. }
  11. var person1 = new Person();
  12. var person2 = new Person();
  13. person1.friends.push("aa");
  14. console.log(person1.friends);//ll jj aa
  15. console.log(person2.friends);//ll jj aa
  16. console.log(person1.friends==person2.friends);//true

修改person1.friends引用的数组,person2同样会修改。

组合使用构造函数和原型模式

创建自定义类型的最常见方式,就是组合使用构造函数和原型模式。构造函数模式用于定义实例属性,原型模式用于定义共享的属性和方法。另外这种模式还支持向构造函数穿参数。

</>复制代码

  1. function Person(name,age){
  2. this.name = name;
  3. this.age = age;
  4. this.friends=["kk","ll"];
  5. }
  6. Person.prototype={
  7. constructor:Person,
  8. sayName:function(){
  9. console.log(this.name)
  10. }
  11. }
  12. var person1 = new Person("nnn",24);
  13. var person2 = new Person("mmm",29);
  14. person1.friends.push("aaa");
  15. console.log(person1.friends);//kk ll aa
  16. console.log(person2.friends);//kk ll
  17. console.log(person1.friends==person2.friends);//false
  18. console.log(person1.sayName==person2.sayName);//true
寄生构造函数模式

</>复制代码

  1. function Person(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. console.log(this.name);
  8. }
  9. return o;
  10. }
  11. var friend = new Person("kk",24,"software");

在这个实例中,Person函数创建了一个新对象,并以相应的属性和方法初始化该对象,然后又返回了这个对象。除了使用new操作符并把使用的包装函数叫做构造函数之外,这与工厂模式没有什么区别。构造函数在不返回值的情况下,默认会返回新对象实例。而通过在构造函数末尾添加一个return语句,可以重写调用构造函数时返回的值。
这个模式可以在特殊的情况下用来为对象创建构造函数。假设我们想创建一个具有额外方法的特殊数组。由于不能直接修改Array的构造函数,因此可以使用这个模式:

</>复制代码

  1. function SpecialArray(){
  2. console.log(this)
  3. var values = new Array();
  4. values.push.apply(values,arguments);
  5. values.toPipedString=function(){
  6. return this.join("|")
  7. }
  8. return values;
  9. }
  10. var colors = new SpecialArray("red","blue","pink");
  11. console.log(colors.toPipedString())

关于寄生构造函数模式,返回的对象与构造函数或则构造函数的原型属性之间没有关系。

稳妥构造函数模式

所谓稳妥对象,指的是没有公共属性,而其方法也不引用this的对象。稳妥构造函数模式与寄生构造函数模式类似,但是有两点不同,一是创建对象的实例方法不引用this,二是不使用new操作符调用构造函数。

</>复制代码

  1. function Person(name,age,job){
  2. //创建要返回的对象
  3. var o = new Object();
  4. //可以在这里定义私有变量和属性
  5. //添加方法
  6. o.sayName=function(){
  7. console.log(name);
  8. }
  9. //返回对象
  10. return o;
  11. }
  12. var friend = Person("kk",24,"software");
  13. friend.sayName();//kk
继承

每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么,假如我们让原型对象等于另一个类型的实例,此时的原型对象将包含一个指向另一个原型的指针,相应的,另一个原型中也包含着一个指向另一个构造函数的指针。

</>复制代码

  1. function SuperType(){
  2. this.property = true;
  3. }
  4. SuperType.prototype.getSuperValue = function(){
  5. return this.property;
  6. }
  7. function SubType(){
  8. this.subProperty = true;
  9. }
  10. SubType.prototype = new SuperType();
  11. console.log(SubType.prototype)
  12. SubType.prototype.getSubValue = function(){
  13. return this.subProperty;
  14. }
  15. var instance = new SubType();
  16. console.log(instance)

以上代码定义了两个类型:SuperType和SubType。每个类型分别有一个属性和一个方法。它们的主要区别在于SubType继承了SuperType,而继承是通过创建SuperType的实例,并将该实例赋值给SubType.prototype实现的。实现的本质是重写原型对象,代之以一个新类型的实例。
在上面的代码中,我们没有使用Subtype默认提供的原型,而是给它换了一个新的原型:这个新的原型就是SuperType的实例。于是新原型不仅具有SuperType的实例所拥有的全部属性和方法,而且其内部还有一个指针,指向了SuperType的原型。
原型链的问题:

</>复制代码

  1. 1.引用类型值的原型属性会被所有实例共享。
  2. 2.在创建子类型的实例时,不能向超类型的构造函数中传递参数。
借用构造函数

在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数的技术。这种技术的思想相当简单,即在子类构造函数的内部调用超类型构造函数。

</>复制代码

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

同时,借用构造函数有一个很大的优势,即可以在子类构造函数中向超类型构造函数传递参数。

</>复制代码

  1. function SuperType(name){
  2. this.colors = ["red","blue","pink"];
  3. this.name = name;
  4. }
  5. function SubType(){
  6. //继承了SuperType
  7. SuperType.call(this,"kk");
  8. }
  9. var instance = new SubType();
  10. console.log(instance.name);//kk

借用构造函数的问题:

</>复制代码

  1. 方法都需要在构造函数中定义,无法复用。
组合继承

</>复制代码

  1. function SuperType(name){
  2. this.name = name;
  3. this.colors=["red","blue","pink"]
  4. }
  5. SuperType.prototype.sayName=function(){
  6. console.log(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. console.log(this.age);
  18. }
  19. var instance1 = new SubType("kk",24);
  20. instance1.colors.push("black");
  21. console.log(instance1.colors);//red blue pink black
  22. instance1.sayName();//kk
  23. instance1.sayAge();//24
  24. var instance2 = new SubType("ll",26);
  25. console.log(instance2.colors);//red blue pink
  26. instance2.sayAge();//26
  27. instance2.sayName();//ll

组合继承避免了原型链和借用构造函数的缺陷,融合了它们的优点。

原型式继承

</>复制代码

  1. function object(o){
  2. function F(){};
  3. F.prototype = o;
  4. return new F();
  5. }

在object()函数内部,先创建了一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,然后返回了这个临时类型的一个实例。从本质上讲object()对传入中的对象进行了浅复制。

</>复制代码

  1. var Person={
  2. name:"kk",
  3. friends:["ll","aa","cc"]
  4. }
  5. var instance1 = object(Person);
  6. instance1.name = "Greg";
  7. instance1.friends.push("dd");
  8. console.log(instance1)
  9. var instance2 = object(Person);
  10. instance2.name = "Linda";
  11. instance2.friends.push("oo");
  12. console.log(instance2)

obejct()会返回一个新对象,这个对象将Person作为原型,所以它的原型中包含一个基本类型值属性和一个引用类型值属性。这就意味着friends不仅是Person的,也同时被instance1和instance2共享。

寄生式继承

寄生式继承思路和寄生式构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后返回对象。

</>复制代码

  1. function object(o){
  2. function F(){};
  3. F.prototype = o;
  4. return new F();
  5. }
  6. function createAnother(original){
  7. var clone = object(original);
  8. clone.sayName=function(){
  9. console.log(this.name)
  10. };
  11. return clone;
  12. }
  13. var Person={
  14. name:"ll",
  15. friens:["kk","cc","aaa"]
  16. }
  17. var instance = createAnother(Person);
  18. console.log(instance)
  19. instance.sayName();
寄生组合式继承

组合继承是js最常用的继承模式;不过,他也有自己的不足。组合继承最大的问题就是无论什么情况下,都会调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。

</>复制代码

  1. function SuperType(name){
  2. this.name = name;
  3. this.colors=["red","blue","pink"];
  4. }
  5. SuperType.prototype.sayName=function(){
  6. console.log(this.name)
  7. }
  8. function SubType(name,age){
  9. SuperType.call(this,name);//第二次调用SuperType()
  10. this.age = age;
  11. }
  12. SubType.prototype = new SuperType()//第一次调用SuperType()
  13. SubType.prototype.constructor = SubType;
  14. SubType.prototype.sayAge=function(){
  15. console.log(this.age);
  16. }

所谓寄生式组合继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。其背后的基本思路:不必为了指定子类型的原型而调用超类型的构造函数,我们需要的无非是超类型原型的一个副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后将结果指定给子类型的原型。

</>复制代码

  1. function object(o){
  2. function F(){};
  3. F.prototype = o;
  4. return new F();
  5. }
  6. function inheritPrototype(subType,superType){
  7. var prototype = object(superType.prototype);//创建对象;
  8. prototype.constructor = subType;//增强对象
  9. subType.prototype = prototype;//指定对象
  10. }
  11. function SuperType(name){
  12. this.name = name;
  13. this.colors = ["red","blue","pink"];
  14. }
  15. SuperType.prototype.sayName=function(){
  16. console.log(this.name);
  17. }
  18. function SubType(name,age){
  19. SuperType.call(this,name);
  20. this.age = age;
  21. }
  22. var aaa = inheritPrototype(SubType,SuperType);
  23. SubType.prototype.sayAge = function(){
  24. console.log(this.age);
  25. }
  26. var instance = new SubType("kk",24);
  27. console.log(instance)
小结

在没有类的情况下,可以采用下列模式创建对象。
1.工厂模式,使用简单的函数创建对象,为对象添加属性和方法,然后返回对象。这个模式后来被构造函数模式所替代。
2.构造函数模式,可以创建自定义引用类型,可以像创建内置对象实例一样使用new操作符。不过,构造函数也有缺点,即他的每个成员都无法得到复用,包括函数。
3.原型模式,使用构造函数的prototype属性来指定那些应该共享的属性和方法。组合使用构造函数模式和原型模式,使用构造函数定义实例的属性,而使用原型定义共享的属性和方法。

JavaScript主要通过原型链实现继承。原型链的构建是通过将一个类型的实例赋值给另一个构造函数的原型来实现的。这样,子类型就能够访问超类型的所有属性和方法,这一点基于类的继承很相似。原型链的问题是对象实例共享所有属性和方法,因此不宜多带带使用。解决这个问题的技术是借用构造函数,即在子类型构造函数内部调用超类型构造函数。这样就可以做到每个实例都具有自己的属性,同时还能保证只使用构造函数模式来定义类型。使用最多的继承模式是组合继承,这种模式使用原型链继承共享的属性和方法,而通过借用构造函数来继承实例属性。
1.原型式继承,可以在不必预先定义构造函数的情况下实现继承,其本质是执行对给定对象的浅复制。而复制得到的副本还可以得到进一步的改造。
2.寄生式继承,与原型式继承非常相似,也是基于某个对象或某些信息创建一个对象,然后增强对象,最后返回对象。为了解决组合继承模式由于多次调用超类型构造函数而导致的低效率问题,可以将这个模式和组合继承一起使用。
3.寄生组合式继承,集寄生式继承和组合继承的优点与一身,是实现基于类型继承的最有效方法。

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

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

相关文章

  • 做个JS面向对象笔记

    摘要:组合构造原型模式将自身属性于构造函数中定义,公用的方法绑定至原型对象上原型对象的解释每一个函数创建时本身内部会有一个固有的原型对象,可以通过函数名去访问,而其原型对象又有一个属性指针指向该函数。 每次遇到JS面对对象这个概念,关于继承及原型,脑海里大概有个知识框架,但是很不系统化,复习下,将其系统化,内容涉及到对象的创建,原型链,以及继承。 创建对象 两种常用方式,其余的比较少见工厂模...

    GitCafe 评论0 收藏0
  • ES6 学习笔记

    摘要:类的属性和属性在上一篇面向对象编程中我们已经了解到一个实例化对象会有一个指向构造函数的属性。子类的属性,表示构造函数的继承,总是指向父类。完成构造函数继承的实质如下第二条对原型链完成方法的继承,实质如下另外还有还有三种特殊情况。 介绍 ECMAScript 6 在接下来的一段时间内将成为 ECMAScript的一个标准。这个标准预计在今年的时候就会被签署,不管在Github,还是在很多...

    alogy 评论0 收藏0
  • JS学习笔记(第6章)(面向对象继承——JS继承的六大方式)

    摘要:除此之外,在超类型的原型中定义的方法,对子类型而言也是不可兼得,结果所有类型都只能用构造函数模式。创建对象增强对象指定对象继承属性这个例子的高效率体现在它只调用了一次构造函数。 1、原型链 原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。构造函数、原型和实例的关系:每个构造函数都有一个原型对象;原型对象都包含着一个指向构造函数的指针;实例都包含一个指向原型对象的...

    lscho 评论0 收藏0
  • Js高级编程笔记--面向对象的程序设计

    摘要:在没有必要创建构造函数,只想让一个对象与另一个对象保持类似的情况下,原型式继承是完全可以胜任的。方便我们进行面向对象的编程。 理解对象 属性类型 1.数据属性 特性: Configurable : 表示能否通过 delete 删除属性,能否修改属性特性,能否把属性改为访问器属性 Enumerable : 表示能否通过 for in 循环返回 Writable : 表示能否修改属性的值...

    gclove 评论0 收藏0
  • JavaScript学习笔记第四天_面向对象编程

    摘要:即另外,注意到构造函数里的属性,都没有经过进行初始化,而是直接使用进行绑定。并且在模式下,构造函数没有使用进行调用,也会导致报错。调用构造函数千万不要忘记写。 1. 基础 JavaScript不区分类和实例的概念,而是通过原型来实现面向对象编程。Java是从高级的抽象上设计的类和实例,而JavaScript的设计理念,听起来就好比Heros里的Peter,可以复制别人的能力。JavaS...

    weapon 评论0 收藏0

发表评论

0条评论

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