码迷,mamicode.com
首页 > 其他好文 > 详细

行为委托

时间:2018-09-02 21:54:23      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:没有   turn   asc   tee   模式   对象关联   create   end   写法   

什么是行为委托?
简单来说就是一种设计模式,不同于传统的构造函数的“类”式设计。


在这之前先说一下原型的基本知识。
什么是原型?简单来说就是一个对象内部关联另外一个对象,本质来说就是对象与对象之间的关联;
一个对象本身没有属性或者方法会到原型对象上查找。

这里每个例子会通过构造函数,class和行为委托来不同实现,不过不会评论class,是否使用class取决于你的观点。


先看一个例子,构造函数写法

function Foo(name) {
    this.name = name;
}
Foo.prototype.age = function() {
    console.log(this.name);
};
function Fn(name) {
    Foo.call(this);
    this.name = name;
}
Fn.prototype = Object.create(Foo.prototype);
Fn.prototype.constructor = Fn.prototype;
Fn.prototype.set = function(value) {
    this.name = value;
};
var a1 = new Fn(‘zhangsan‘);
a1.age(); //zhangsan
var a2 = new Fn(‘lisi‘);
a2.set(‘xiaowu‘); 
a2.age(); //xiaowu

 

class写法

class Foo {
    constructor(name) {
    this.name = name;
    }
    age() {
        console.log(this.name);
    }
}
class Fn extends Foo {
    constructor(name) {
        super();
        this.name = name;
    }
    set(value) {
        this.name = value;
    }
}
var a1 = new Fn(‘zhangsan‘);
a1.age(); //zhangsan
var a2 = new Fn(‘lisi‘);
a2.set(‘xiaowu‘); 
a2.age(); //xiaowu            

 

行为委托写法

var Foo = {
        const(name) {
            this.name = name;
    },
    age() {
        console.log(this.name);
    }
};
var Fn = Object.create(Foo);
Fn.set = function (value) {
    this.name = value;
};
var a1 = Object.create(Fn);
a1.const(‘zhangsan‘);
a1.age(); //zhangsan
var a2 = Object.create(Fn);
a2.set(‘xiaowu‘); 
a2.age(); //xiaowu    

 


可以看到比起构造函数,行为委托是通过原型链来实现的,他值关心一件事情,对象指向的关系。

 

再来看一个复杂一些的例子,为dom添加样式。

function Foo(value) {
    this.dom = value;
}
Foo.prototype.div = function () {
    var div = document.createElement(this.dom);
    this._dom = document.body.appendChild(div);
    return this._dom;
};
Foo.prototype.get = function () {
    return this._dom;
};
function Fn(text, cssText) {
    Foo.call(this, ‘div‘);
    this.text = text;
    this.cssText = cssText;
}
Fn.prototype = Object.create(Foo.prototype);
Fn.prototype.constructor = Fn.prototype;
    Fn.prototype.set = function () {
    this.div();
    var div = this.get();
    div.textContent = this.text;
    Object.keys(this.cssText).forEach((name) => {
        div.style.cssText += `${name}: ${this.cssText[name]}`;
    });
};
var a = new Fn(‘hi‘, {color: ‘red‘, "font-size": ‘16px‘});
a.set();    

 

class写法

class Foo {
    constructor(value) {
        this.dom = value;
    }
    div() {
        var div = document.createElement(this.dom);
        this._dom = document.body.appendChild(div);
    return this._dom;
    }
    get() {
        return this._dom;
    }
}
class Fn extends Foo {
    constructor(text, cssText) {
    super(‘div‘);
    this.text = text;
    this.cssText = cssText;
}
set() {
    super.div();
    var div = super.get();
    div.textContent = this.text;
    Object.keys(this.cssText).forEach((name) => {
        div.style.cssText += `${name}: ${this.cssText[name]}`;
    });
}
}
var a = new Fn(‘hi‘, { color: ‘red‘, "font-size": ‘16px‘ });
a.set();            

  

行为委托写法

var Foo = {
        const(value) {
        this.dom = value;
},
    div() {
        var div = document.createElement(this.dom);
        this._dom = document.body.appendChild(div);
        return this._dom;
},
    get() {
        return this._dom;
    }
};
var Fn = Object.create(Foo);
Fn.constructor = function (text, cssText) {
    this.const.call(this, ‘div‘);
    this.text = text;
    this.cssText = cssText;
};
Fn.set = function () {
    this.div();
    let div = this.get();
    div.textContent = this.text;
    Object.keys(this.cssText).forEach((name) => {
        div.style.cssText += `${name}: ${this.cssText[name]}`;
    });
};
var a = Object.create(Fn);
a.constructor(‘hi‘, { color: ‘red‘, "font-size": ‘16px‘ });
a.set();        

 

注意点:
1.在使用行为委托时要避免标识符的重名,因为行为委托是基于原型链,不同于“类”的设计模式,可以构造函数与实例对象同时定义相同的名称的标识符。

2.两个委托对象无法互相委托,假设一个a对象关联b对象,然后b对象再关联a对象,如果两个引用了一个两个对象都不存在的属性或者方法,那么就会在原型链上形成无限循环。

 

行为委托

标签:没有   turn   asc   tee   模式   对象关联   create   end   写法   

原文地址:https://www.cnblogs.com/boses/p/9575247.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!