在three.js中，发现了大量使用Object.assign和Object.create方法，并且很多构造函数都有继承EventDispatcher,现针对EventDispatcher方法研究一下
1.源码
function EventDispatcher() {} // 构造函数
Object.assign(EventDispatcher.prototype, {
addEventListener: function (type, listener) {
if (this._listeners === undefined) {
this._listeners = {};
}
var listeners = this._listeners;
if (listeners[type] === undefined) {
listeners[type] = [];
}
if (listeners[type].indexOf(listener) === -1) {
listeners[type].push(listener);
}
},
hasEventListener: function (type, listener) {
if (this._listeners === undefined) {
return false;
}
var listeners = this._listeners;
return listeners[type] !== undefined && listeners[type].indexOf(listener) !== -1;
},
removeEventListener: function (type, listener) {
if (this._listeners === undefined) {
return;
}
var listeners = this._listeners;
var listenerArray = listeners[type];
if (listenerArray !== undefined) {
var index = listenerArray.indexOf(listener);
if (index !== -1) {
listenerArray.splice(index, 1);
}
}
},
dispatchEvent: function (event) {
if (this._listeners === undefined) {
return;
}
var listeners = this._listeners;
var listenerArray = listeners[event.type];
if (listenerArray !== undefined) {
event.target = this;
var array = listenerArray.slice(0);
for (var i = 0, l = array.length; i < l; i++) {
array[i].call(this, event);
}
}
}
});
function Texture() {} // 构造函数
Texture.prototype = Object.assign(Object.create(EventDispatcher.prototype), {
test: function() {
console.log('test')
}
})
2.测试代码
const tt = new Texture()
console.log('tt', tt)
3.核心代码说明
如果作如下代码修改
此时的输出结果如下:
4.总结
- three.js中很多构造函数都会继承EventDispatcher构造函数
- Object.assign方法的使用
- Object.create方法的使用
- three.js中的事件监听和其他的框架都是类似的,例如jQuery也是如此来处理,都是相同的原理
