Extension of the Ember class

Extend general properties

reopen not know how to translate well, reopen translation 扩展 should be "reopened", but always feel bad, so translated into an extension, if there is something wrong please point out.

When you want to extend a class you can add reopen() directly to a defined class using the reopen() method. I f you are extend() method you need to redefine a sub-class and then add new properties and methods to the sub-class. A s noted in the previous article, create() be called with a calculated property and is not recommended for new definitions and reopen() method can compensate for the create() method. Much extend() approach, the following code demonstrates their differences.

Parent = Ember.Object.extend({
    name: 'ubuntuvim',
    fun1() {
        console.log("The name is " + this.name);
    },
    common() {
       console.log("common method..."); 
    }
});   
//  使用extend()方法添加新的属性、方法
Child1 = Parent.extend({
    //  给类Parent为新增一个属性
    pwd: '12345',
    //  给类Parent为新增一个方法
    fun2() {
        console.log("The pwd is " + this.pwd);
    },
    //    重写父类的common()方法
    common() {
        //console.log("override common method of parent...");
        this._super();
    }
});
    
var c1 = Child1.create();
console.log("name = " + c1.get('name') + ", pwd = " + c1.get('pwd'));   
c1.fun1();
c1.fun2();     
c1.common();
console.log("-----------------------");    
    
//  使用reopen()方法添加新的属性、方法
Parent.reopen({
    //  给类Parent为新增一个属性
    pwd: '12345',
    //  给类Parent为新增一个方法
    fun2() {
        console.log("The pwd is " + this.pwd);
    },
    //  重写类本身common()方法
    common() {
        console.log("override common method by reopen method...");
        //this._super();
    },
    //  新增一个计算属性
    fullName: Ember.computed(function() {
    console.log("compute method...");
    })
});
var p = Parent.create();    
console.log("name = " + p.get('name') + ", pwd = " + p.get('pwd'));   
p.fun1();
p.fun2();    
p.common();
console.log("---------------------------");    
p.get('fullName');  //  获取计算属性值，这里是直接输出：compute method...
//  使用extend()方法添加新的属性、方法
Child2 = Parent.extend({
    //  给类Parent为新增一个属性
    pwd: '12345',
    //  给类Parent为新增一个方法
    fun2() {
        console.log("The pwd is " + this.pwd);
    },
    //    重写父类的common()方法
    common() {
        //console.log("override common method of parent...");
        this._super();
    }
});    
var c2 = Child2.create();
console.log("name = " + c2.get('name') + ", pwd = " + c2.get('pwd'));   
c2.fun1();
c2.fun2(); 
c2.common();

The difference can be seen from the execution results as follows:
Same point: Can be used to extend a class.
Alien:

extend needs to redefine a class and inherit the extended class;
reopen a new property, method, that is added to the extended class itself, and can extend the calculated property create() method);

Depending on the actual situation with that method, reopen changes the behavior of the original class (it is conceivable that the method and properties of the object's prototype object are modified), just as the behavior of the reopen class common method Child2 by the common has changed, and the reopen method may have reopen know what was going on before the encoding process forgot! If the extend results in more classes, the inheritance tree becomes deeper and deeper, which is also a challenge for performance and extend not change the behavior of the inherited class.

Extend static properties

Use reopenClass() extend the properties and methods of the static type.

Parent = Ember.Object.extend();   
    
//  使用reopenClass()方法添加新的static属性、方法
Parent.reopenClass({
    isPerson: true,
    username: 'blog.ddlisting.com' 
    //,name: 'test'  //这里有点奇怪，不知道为何不能使用名称为name定义属性，会提示这个是自读属性，使用username却没问题！！估计name是这个方法的保留关键字
});
Parent.reopen({
    isPerson: false,
    name: 'ubuntuvim'
});
console.log(Parent.isPerson);
console.log(Parent.name);  //  输出空
console.log(Parent.create().get('isPerson'));
console.log(Parent.create().get('name'));    //  输出 ubuntuvim

There is an explanation for the address below the problem name the property name in the reopenClass method

The full code of the blog post is placed in Github (the blog post has been modified several times, and the code on the blog post may be different from the github code, but the impact is small!). I f you think the blog post is a bit of a github project for you, give me star Yours is definitely the biggest motivation for me!!

Extend general properties

Extend static properties

Cookie Consent