• 浅谈JavaScript的面向对象程序设计(二)


      前面介绍通过Object构造函数或者字面量创建单个对象,但是通过这个的方法创建对象有明显的缺点:调用同一个接口创建多个实例,会产生大量的重复代码。怎么样解决?

    工厂模式

      工厂模式是软件工程领域经常使用的一种设计模式,这种设计模式抽象了创建对象的具体过程。由于在JavaScript中无法使用类,可以使用函数来封装特定接口创建对象。

     1 function createPerson(name,age,sex){
     2                     var obj= new Object();
     3                     obj.name=name;
     4                     obj.age=age;
     5                     obj.sex=sex;
     6                     obj.getName=function(){
     7                         return this.name;
     8                     }
     9                 }
    10                 var person1 = createPerson("ge","18","man");
    11                 var person2 = createPerson("james","18","man");

      函数createPerson能够接受参数创建person对象。可以多次调用这个函数,创建拥有同样属性和方法的对象。工厂模式解决了多次创建,代码重复的问题,但是却遇到了对象识别的问题。我们没有办法识别这些对象。

    构造函数模式

      前面介绍过构造函数可以创建特定类型的对象。对于Object和Array这样的构造函数,在程序运行时,会自动执行在环境中。通过自定义的函数创建属性,可以自己定义属性和方法。

     1 var obj={};
     2                 function Person(name,age,sex){
     3                     this.name=name;
     4                     this.age=age;
     5                     this.sex=sex;
     6                     this.getName=function(){
     7                         return this.name;
     8                     }
     9                 }
    10                 var person1 = new Person("ge",18,"man");
    11                 var person2 = new Person("ha",19,"man");
    12                 console.log(obj instanceof Person);//false
    13                 console.log(person1 instanceof Person);//true
    14                 console.log(person2 instanceof Person);//true

      上面的代码,通过字面量创建了一个对象obj。定义一个函数Person,通过this添加了三个属性和一个方法。10行和11行创建了两个person对象,通过instanceof来判断对象的类型。通过上面的代码创建对象,没有调用Object方法,直接将属性和方法赋值给this。

      创建Person对象实例,要经历以下过程:创建一个新对象;将构造函数的作用域赋值给新对象;执行构造函数中的代码;返回新对象。

      在前面的代码中,person1和person2分别保存这Person对象的不同实例。这两个实例有一个实例属性constructor属性,该属性指向Person

    1 console.log(person1.constructor==Person);//true
    2 console.log(person2.constructor==Person);//true

      构造函数与其他函数的唯一区别,就是调用他们的方式不同。任何函数只要通过new操作符来调用,那它就可以作为构造函数;如果不通过new来调用,那它就是普通函数。

      

    1 var person1 = new Person("ge",18,"man");
    2 Person("jiang",18,"man");
    3 window.getName();

      上面的代码显示了函数的普通调用以及new操作符来调用。如果不通过new操作符调用函数,则属性和方法都会被添加到window中。构造函数创建对象的主要缺点是每个方法在创建对象的时候,是重新创建了一遍。person1和person2都有getName方法,但是这两个方法是不同的函数实例。 1 console.log(person1.getName==person2.getName);//false ,这句代码可以说明getName是不同的函数实例。

      

    1 function Person(name,age,sex){
    2                     this.name=name;
    3                     this.age=age;
    4                     this.sex=sex;
    5                     this.getName=getName;
    6                 }
    7                 function getName(){
    8                         return this.name;
    9                     }

      上面的代码在Person外部定义的函数getName,在内部通过this指向了外部的方法。但是getName是全局变量,如果全局变量只能给一个函数使用,那这个全局变量实在没有存在的必要。

    原型模式 

      我们创建的每一个函数都有prototype属性,他是一个指针,指向一个对象。这个对象的用途是可以由特定类型的所有实例共享属性和方法。prototype就是通过调用构造函数创建的实例的原型对象。使用原型的优势是可以让所有的对象实例共享属性和方法。不必的在构造函数中定义对象的属性和方法,可以通过原型来创建。

     1 function Person(name,age,sex){
     2                     this.name=name;
     3                     this.age=age;
     4                     this.sex=sex;
     5                 }
     6                 Person.prototype.getName=function(){
     7                     return this.name;
     8                 }
     9                 var person1 = new Person("haha","ge","man");
    10                 var person2 = new Person("hehe","dd","man");
    11                 console.log( person1.getName== person2.getName);//true

      上面的代码定义了一个对象Person,通过this方法给对象添加了属性,通过原型给对象添加了方法。并在第九行和第十行新建了对象的两个实例。通过测试,这个两个实例的getName相等,也就是说这两个实例的getName方法指向同一个函数。

    • 什么是原型对象

      无论什么时候,只要创建了一个函数,JavaScript就会根据特定的规则为函数创建prototype属性,这个属性指向函数的原型对象。默认情况下,这个属性会自动获得一个constructor属性,constructor指向函数指针。Person.prototype.constructor指向Person函数。创建了自定义的函数后,原型对象默认只有一个属性constructor属性;其他属性则是从Object对象继续而来。当调用构造函数创建一个实例后,该实例的内部将包含一个指针,指向构造函数的原型对象。 console.log(Person.prototype.isPrototypeOf(person1)); 通过isPrototypeOf可以确定person1是否是Person.prototype原型对象。 console.log(Object.getPrototypeOf(person1)==Person.prototype); 上面的代码通过Object的getPrototypeOf方法获取实例的原型对象。 1 console.log(Object.getPrototypeOf(person1).getName); 通过该方法获取的是实例的原型对象,并能够获取原型对象拥有的属性和方法。

      通过对象实例能够访问保存在原型中的属性值,但是却不能通过对象实例修改原型中的属性值,如果给对象实例添加了一个和原型实例相同名字的属性,则原型中的属性将会被覆盖。

     1 function Person(){
     2                     
     3                 }
     4                 Person.prototype.Name="haha";
     5                 Person.prototype.age="19";
     6                 var person1 = new Person();
     7                 var person2 = new Person();
     8                 person1.Name="jordan";
     9                 console.log(person1.Name);//jordan
    10                 console.log(person2.Name);//haha

      上面的代码,我们定义了一个函数,并为函数通过原型的方法添加了属性name和age。然后通过new  构造函数创建了该对象的两个实例person1和person2。为person1添加了属性name,其实是覆盖了原型中的属性name,通过下面的输出可以确定,person2的输出依然是原型中属性的值。

      当为对象实例添加一个属性时候,如果该属性与原型中的属性重名,则会屏蔽原型中的属性。也就是说,添加这个属性会阻止我们访问原型中的属性,并不会修改原型中属性的值。对象的属性检索是从对象本身实例开始,然后再到原型中查找,如果查找到,则不会继续检索。delete操作符可以删除实例中的属性,从而可以继续访问原型属性。

     1 function Person(){
     2                     
     3                 }
     4                 Person.prototype.Name="haha";
     5                 Person.prototype.age="19";
     6                 var person1 = new Person();
     7                 var person2 = new Person();
     8                 person1.Name="jordan";
     9                 console.log(person1.Name);//jordan
    10                 delete person1.Name;
    11                 console.log(person1.Name);//haha

      上面的代码,我们使用delete操作符删除了person1实例中的属性Name,但是我们通过person1Name访问到的就是原型对象的属性。可以通过hasOwnProperty方法来判断属性是在实例中,还是在对象中。该方法继承于Object中。

      

     1 function Person(){
     2                     this.sex="man";
     3                 }
     4                 Person.prototype.Name="haha";
     5                 Person.prototype.age="19";
     6                 var person1 = new Person();
     7                 var person2 = new Person();
     8                 person1.Name="jordan";
     9                 console.log(person1.hasOwnProperty("Name"));//true
    10                 console.log(person1.Name);//jordan
    11                 delete person1.Name;
    12                 console.log(person1.hasOwnProperty("Name"));//false
    13                 console.log(person1.Name);//haha

      上面的代码通过hasOwnProperty方法判断了name属性是属于原型还是属于实例。

    1 function Person(){
    2                     
    3                 }
    4                 Person.prototype.Name="haha";
    5                 Person.prototype.age="19";
    6                 var person1 = new Person();
    7                 for(key in person1){
    8                     console.log(key);
    9                 }

      通过for-in循环能够获取到实例的原型属性以及方法。当然也可以通过in来判断实例是否拥有属性。 console.log("Name" in person1); 通过in操作符合方法hasOwnProperty能够确认属性是存在于对象中还是原型中。in操作符无论是对象中属性还是原型中属性都返回true,hasOwnProperty只有存在于实例中才返回true。

      

    1 //true,实例中属性
    2                 //false,原型中属性
    3                 function hasOwnProperty(obj,name){
    4                     return obj.hasOwnProperty(name)&&(name in obj);
    5                 }

      要获取对象上所有可以枚举的属性,可以通过Object.keys方法,返回字符串组成的数组。 1 var keys = Object.keys(Person.prototype); 2 console.log(keys.toString());//Name,age 。Object.keys方法获取了Person中可以枚举的属性。

    1 var allkeys=Object.getOwnPropertyNames(Person.prototype);
    2                 console.log(allkeys.toString());//constructor,Name,age

      通过Object.getOwnPropertyNames能够获取所有的属性,包括不可枚举的属性。

    • 原型的动态性   

      在原型中的修改是一次搜索,我们对原型的修改,会立即从实例上反映出来。即使是先创建实例,再修改原型,也可以。

      

    1 function Person(){
    2                     
    3                 }
    4                 var person1 = new Person();
    5                 Person.prototype.getName=function(){
    6                     return "hehe";
    7                 }
    8                 console.log(person1.getName());//hehe

      上面的代码定义了函数,并为对象创建了实例。在实例化之后,我们在原型中添加了属性getName,但是我们依然能够访问该原型。当我们在person1中调用getName时,首先在实例中搜索,如果搜索不到,则到原型中进行检索。原型与实例之间的连接是一个指针,因此可以在原型中找到getName属性。但是如果我们重写了原型对象,则无法访问到属性。实例中的指针仅仅指向原型,但是无法指向构造函数。

     1 function Person(){
     2                     
     3                 }
     4                 
     5                 var person1 = new Person();
     6                 Person.prototype={
     7                     getName:function(){return "hehe"}
     8                 };
     9                 var person2 = new Person();
    10                 console.log(person2.getName());//hehe
    11                 console.log(person1.getName());//报错

      上面的代码就显示了重写原型对象后,person1已经无法调用到原型的属性和方法了。但是peprson2可以调用到。

    • 原生对象的原型

      JavaScript中的引用类型都采用了原型模式。原生引用类型(Array、String、和Object)都在构造函数的原型上定义了方法。比如在String的原型用有toString()方法。

     1 console.log(typeof String.prototype.toString);//function 。同时我们还可以为原生引用类型添加新的方法。比如我们为String添加getString方法。

    1 String.prototype.getString=function(){
    2                     return this.toString().trim();
    3                 }
    4                 var str=" wo  ";
    5                 console.log(str.getString());//wo

      上面的代码,我们为String的原型添加了getString 方法,该方法调用了toString方法和trim方法。

  • 相关阅读:
    Shell脚本笔记(二)Shell变量
    Shell脚本笔记(三)shell中的数学计算
    Shell脚本笔记(五)Shell函数
    Shell脚本笔记(四)条件判断
    Kotlin基础(五)Kotlin的类型系统
    Kotlin基础(四)Lambda编程
    Kotlin基础(三)类、对象和接口
    Kotlin基础(二)函数的定义与调用
    Kotlin基础(一)Kotlin快速入门
    第四周学习进度
  • 原文地址:https://www.cnblogs.com/ggz19/p/8205743.html
Copyright © 2020-2023  润新知