1.源码截图

#yyds干货盘点#three.js源码解读-Geometry和BoxGeometry继承结构_继承

2.代码结构

// 基类 构造函数
function Geometry() {
// 属性
this.type = 'Geometry'
// 其他代码...
}

// 方法
Geometry.prototype = Object.assign(Object.create( EventDispatcher.prototype ), {
constructor: Geometry,
isGeometry: true,
// 其他代码...
})

/**
* 此处用到的技术
* 1. 自执行函数
* 2. 闭包 -> 解决变量污染问题
*/
const BoxGeometry = (function (Geometry) {
function BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments) {
Geometry.call(this)
this.type = 'BoxGeometry' // 此处重写了基类中的type属性值
this.parameters = {
width: width,
height: height,
depth: depth,
widthSegments: widthSegments,
heightSegments: heightSegments,
depthSegments: depthSegments
}
// 其他代码...
}

// if(Geometry) BoxGeometry.__proto__ = Geometry // 源码中有该行代码, 其实是可以不需要的
BoxGeometry.prototype = Object.create( Geometry && Geometry.prototype )
BoxGeometry.prototype.constructor = BoxGeometry

return BoxGeometry
}(Geometry))

const box = new BoxGeometry()
console.log('box', box)

3.总结

  • 自执行函数
  • 继承
  • 闭包 -> 解决变量污染问题

4.其他

其他构造函数都是如此的写法,如下

#yyds干货盘点#three.js源码解读-Geometry和BoxGeometry继承结构_继承_02