技术文章资源

Javascript 类 和 PHP 类的实现

Wordpress, Magento模板开发用得最多的2种编程语言就是PHP和Javascript,我们来用ES5 的对象,ES6 的类和PHP类来实现同样的功能,输出同样的结果,这种对比有利于加深对这2种语言面向对象功能的理解。

ECMAScript 2015 (ES6) 引入了 Javascript 类。Javascript 类是 Javascript 对象的模板。使用关键词 class 来创建一个类, 类一般都有构造函数constructor(); 类创建语法如下:

class ClassName {
     constructor() {...}
}

先来看ES6 Javascript 类的代码:

class Pet{
    constructor(type, color) {
        this.type = type;
        this.color = color;
    }

    register(){
        return `It is ${this.color} ${this.type}`;
        //return "It is " + this.color + " " + this.type;
        //这里用模板字符串(Template literals 或 Template strings)的方式来输出更加简洁,而传统单引号或双引号的方式很笨拙。
        //注意模板字符串用用反引号(一般键盘ESC键正下方的键)来封闭,不是单引号。
    }
}

class Cat extends Pet {
    constructor(type, color, ability) {
        super(type, color);
        //用 super()来访问父类的参数。

        this.ability = ability;
    }

    plusinfo() {
        return `${this.color} ${this.type} can ${this.ability}`;
        //return this.color + " " + this.type + " can " + this.ability;
        //这里也提供了模板字符串的写法。
    }
}

const pet1 = new Cat('cat', 'yellow', 'jump');
console.log(pet1.register());
console.log(pet1.plusinfo());

输出结果如下:

在ES5 没有引入类的概念之前,Javascript 对象构建函数用来实现传统面向对象语言的功能,用prototype来继承,添加属性和方法, ES5实现同样功能的代码如下:

function Pet(type, color){
    this.type = type;
    this.color = color;
    this.register = function (){
        return `It is ${this.color} ${this.type}`;
    }
}

function Cat(type, color, ability){
    Pet.call(this, type, color);
    this.ability = ability;
}

Cat.prototype.plusinfo = function (){
    //这里不能用 Cat.plusinfo = function(){...} 来添加方法,必须通过 prototype,同样也不可以不通过 prototype 来添加属性。
    return `${this.color} ${this.type} can ${this.ability}`;
}

const pet1 = new Cat('cat', 'yellow', 'jump');
console.log(pet1.register());
console.log(pet1.plusinfo());

最后,我们用PHP的类来实现同样功能,代码如下:

<?php
class Pet {
    public function __construct($type, $color){
        $this->type = $type;
        $this->color = $color;
    }
    public function register(){
        return "It is {$this->color} {$this->type}";
        //我们同样在PHP字符串中添加了变量。
        //注意这里我们可以用单引号或者双引号,而不是像Javascript中用反引号。
        //注意$的位置和Javascript不同。
    }
}

class Cat extends Pet{
    public function __construct($type, $color, $ability)
    {
        parent::__construct($type, $color);

        $this->ability = $ability;
    }

    public function plusinfo() {
        return "{$this->color} {$this->type} can {$this->ability}";
    }

}

$pet1 = new Cat('cat', 'yellow', 'jump');

echo $pet1->register();
echo $pet1->plusinfo();

用ES6的类来实现功能看起来更加规范,目前主流浏览器都已经支持ES6标准,所有最好多用类来实现。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

  +  53  =  62

Back to top button