程序员人生 网站导航

ES6与ES5对比-----'类'

栏目:php教程时间:2017-03-15 09:45:54

ES6与ES5对照—–’类’

// ES5

function Application() {
    this.a = 123;
    this.b = 456;

    this.foo = function() {
        return 135;
    }
}

var pro = Application.prototype;

pro.bar = function() {
    return 246;
}

var app = new Application();

console.dir(typeof Application);    // => 'function'
console.dir(Application);           // => [Function: Application]
console.dir(app);                   // => {a:123, b: 456, foo: [function]}
console.dir(typeof app);            // => 'object'
console.dir(app.bar());             // => 246
// ES6

class Application {

    // constructor方法默许返回实例对象,1个类必须有该方法,没有会被默许添加
    constructor() {              
        this.a = 123;           // => this指代新的实例对象,即new的对象
        this.b = 456;
        this.foo = function() {
            return 135;
        }
    }

    bar() {
        return 246;
    }
}

let app = new Application();

console.dir(typeof Application);    // => 'function'
console.dir(Application);           // => [Function: Application]
console.dir(app);                   // => {a:123, b: 456, foo: [function]}
console.dir(typeof app);            // => 'object'
console.dir(app.bar());             // => 246

console.dir(app.constructor);       // => [Function: Application]

* 可以发现,两次的打印1模1样,我们可以理解为class实际上是构造函数的1个语法糖,只是为了让JavaScript看起来更像1门面向对象的语言 *

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐