• JavaScript类属性的定义方法和区别


    几种属性:

    先看代码,这段代码中出现了类定义中可能使用到5种属性或者变量

    01function car(param1,param2){
    02    //构造变量
    03    var varProperty = 'This is a var Perperty';
    04    //构造属性
    05    this.constructProperty = 'This is a construct Property'
    06}
    07 
    08//原形属性
    09car.prototype.prototypeProperty = 'This is a prototype property';
    10 
    11//静态属性
    12car.staticProperty = 'This is a static property';

    构造变量 使用VAR声明和定义,它的作用域仅限于构造方法内部,包括在构造器内部定义的所有方法(构造方法)。直接通过变量名访问:varProperty。有些文章也把叫做私有属性,从作用域上看,它是私有的,但它不是属性,类的原型是无法访问它的。

    构造参数 就是上述代码中的 param1,param2,它与构造变量有相同的作用域和方法方式

    01function car(param1,param2){
    02    //构造变量
    03    var varProperty = 'This is a var Perperty';
    04 
    05    echo(varProperty);
    06    echo(param1);
    07 
    08    this.someMethod = function(){
    09        echo(varProperty);
    10        echo(param1);
    11     };
    12}


    构造属性 构造属性在类的构造器中通过this.定义,它是公开的(public),可以通过类的实例(this.)直接访问和修改它

    原型属性 在类的原型中定义,它也是公开,具有和构造属性相同的作用域,它不仅可以通过实例访问,也可以随时通过原型来访问((ClassName.propertype.)

    它和构造属性是有区别的:原型属性可以通过原型直接访问,它存储于类的原型中的,各个实例是通过指针共享访问它具体下面单独分析

    01function car(){
    02 
    03    //构造属性
    04    this.constructProperty = 'This is a construct Property'
    05 
    06    this.someMethod = function(){
    07        echo(this.constructProperty);//这样可以
    08        echo(this.ptototypeProperty);//这一可以
    09     };
    10}
    11 
    12//原形属性
    13car.prototype.prototypeProperty = 'This is a prototype property';
    14 
    15echo(car.constructProperty); //这样是不能访问构造属性的
    16echo(car.ptototypeProperty); //这样是不能访问原型属性的
    17 
    18//必须通过实例来访问
    19aCar = new car();
    20echo(aCar.constructProperty); //这样可以
    21echo(aCar.ptototypeProperty); //这样可以
    22 
    23echo(car.prototypeProperty)   //原型属性可以通过原型直接访问

     

    静态属性 直接通过ClassName.的方式定义,它具有和常规OOP语言中的静态属性类似的特性,但注意,它只能通过ClassName访问,不能通过实例访问,在类的中也不能通过this访问

    01function car(param1,param2){
    02    echo(this.staticProperty);//这样是不能访问到静态属性的。
    03    echo(car.staticProperty);//这样可以访问到静态属性的。
    04}
    05 
    06//静态属性
    07car.staticProperty = 'This is a static property';
    08 
    09aCar = new car();
    10echo(aCar.staticPerperty);//这样是不能访问到静态属性的。
    11echo(car.staticProperty);//这样可以访问到静态属性的。

    构造属性和原型属性的区别:

    上面已经说了构造属性和原型属性的定义方式,和访问方法,它们的主要区别在于:原型属性可以通过原型直接访问,它存储于类的原型中的,各个实例是通过指针共享访问它。也就是说对于每个构造属性,每个实例都有一个自己存储副本;而对于每个原形属性,每个实例实际上是共享同一个存储副本,实例中存储的仅仅是一个指向原型属性的指针。

    看代码吧:

    01function car(){
    02    //构造属性
    03    this.constructProperty = new Array ('tom','jerry');
    04}
    05 
    06//原形属性
    07car.prototype.prototypeProperty = new Array ('tom','jerry');
    08 
    09aCar = new car();
    10bCar = new car();
    11cCar = new car();
    12 
    13//修改aCar的构造属性
    14aCar.constructProperty.push('Emeric');
    15echo(aCar.constructProperty);
    16echo(bCar.constructProperty);
    17echo(bCar.constructProperty);
    18 
    19//修改aCar的原型属性
    20aCar.prototypeProperty.push('Emeric');
    21echo(aCar.prototypeProperty);
    22echo(bCar.prototypeProperty);
    23echo(bCar.prototypeProperty);

    输出结果:

    //改变aCar的构造属性,仅仅影响到的aCar单一实例
    tom,jerry,Emeric
    tom,jerry
    tom,jerry
    //改变aCar的原型属性,影响到了所有实例
    tom,jerry,Emeric
    tom,jerry,Emeric
    tom,jerry,Emeric

    这里我们为什么在示例代码中使用数组,而没有使用其它简单变量呢?来看另一段代码:这段代码的和上面的唯一区别是使用了字符串作为属性,

    01function car(){
    02    //构造属性
    03    this.constructProperty = 'This is a construct Property'
    04}
    05 
    06//原形属性
    07car.prototype.prototypeProperty = 'This is a prototype property';
    08 
    09aCar = new car();
    10bCar = new car();
    11cCar = new car();
    12 
    13aCar.constructProperty = 'New string';
    14echo(aCar.constructProperty);
    15echo(bCar.constructProperty);
    16echo(bCar.constructProperty);
    17 
    18aCar.prototypeProperty = 'New string';
    19echo(aCar.prototypeProperty);
    20echo(bCar.prototypeProperty);
    21echo(bCar.prototypeProperty);

    输出结果如下,对aCar的两种属性的修改都没有影响到其它实例,正如上面所说,javascript在实例中使用指针来指向原型属性,当使用 aCar.prototypeProperty = 'New string' 进行直接赋值时,javascript进行的操作是修改实例的指针(aCar.prototypeProperty ),使其指向新的存储副本 'New string' ,这一过程往往会掩盖了原型属性的共享特性。

     

    New string
    This is a construct Property
    This is a construct Property
    New string
    This is a prototype property
    This is a prototype property

    再看一段补充代码,这是接着上面的代码运行的,我们通过原型来直接修改了原型属性:

    1car.prototype.prototypeProperty = 'Another New String!';
    2echo(aCar.prototypeProperty);
    3echo(bCar.prototypeProperty);
    4echo(bCar.prototypeProperty);

    输出结果如下,会发现,这一修改仅仅影响到了bCar和cCar。

    原因其实就是因为上面 aCar.prototypeProperty = 'New string' 的,它改变了 aCar.prototypeProperty 的指向,而不再指向 原型,因而他也就脱离了原型的控制。

    New string
    Another New String!
    Another New String!

    由于原型属性的共享特性和可能发生的实例指针脱离原型的现象,我们应该仅仅对需要共享的属性使用原型定义,一般的属性应该尽量使用构造来定义;在修改原型属性时应该尽可能通过原型(car.prototype.)来访问修改,而不要通过实例(aCar.)来修改;。以此来避免可能发生的属性混乱问题。

  • 相关阅读:
    2.2 Scala基础知识
    Linux---用户及权限管理类命令
    Linux---进程控制类命令
    Linux---vim编辑文本文件
    Linux---文件压缩与解压缩命令
    Linux---查找命令
    Linux---基本目录与文件命令
    nginx配置技巧汇总
    Go 内嵌静态资源
    go语言的time.Sleep
  • 原文地址:https://www.cnblogs.com/jianjialin/p/1693650.html
Copyright © 2020-2023  润新知