构造函数模式
function Person(name, age){
// 创建属性,显式赋给this对象,this指向Person构造函数
this.name = name;
this.age = age;
// 创建方法
this.sayName = function(){
alert(this.name);
};
}
//new实例化对象
var person1 = new Person("张三", 29);
person1.sayName(); //张三
- 默认函数首字母大写
- 构造函数和普通函数的区别在于调用方法,使用new操作符调用的就是构造函数。
- 可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。
- 当创建一个函数的新实例,必须使用new操作符,这种方式调用构造函数会经历以下4个步骤:
- 创建一个新对象;
- 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象);
- 执行构造函数中的代码(为这个新对象添加属性);
- 返回新对象。
原型模式
function Person(){}
// 创建属性,指向Person的原型对象Person.prototype
Person.prototype.name = "张三";
Person.prototype.age = 29;
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"张三"
- 无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数对象创建一个prototype属性,这个属性指向函数的原型对象。
- 函数原型对象上的属性和方法都是所有实例共享的,值类型可以覆盖,但不能重写。
- 对于在原型对象上定义的引用类型的值,是可以修改的。
构造函数与原型混成的模式
function Person(name){
//公有属性
this.name = name;
this.age = "18";
//私有属性
var address = "福建"
var _this = this;
//公有方法(这个方法每次实例化都要重新构造)
this.sayName() = function() {
console.log(this.name)
}
//私有方法
function sayName2() {
console.log(_this.name)
}
}
// 公有方法,在原型对象上定义方法(所有实例化后,都共同引用同一个,比直接在构造函数中写的效率要高的多)
Person.prototype.sayName3 = function() {
console.log(this.name)
}
var person1 = new Person("张三")
这种模式,是目前在 ECMAScript中使用最广泛、认同度最高的一种创建自定义类型的方法。
好处:每个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的引用,最大限度地节省了内存。
可以把不变的属性和方法,直接定义在prototype对象上
不管实例化多少,原型对象上的属性,方法其实都是一个内存地址,指向prototype对象
尝试着写的小案例
var PageMain = function(data, nextScene) {
this.data = data;
this.nextScene = nextScene;
this.index = 0;
this.nextPage(); //加载下一页
}
// 加载下一页
PageMain.prototype.nextPage = function() {
var index = this.index;
var _length = this.data.length;
if(index < _length) {
this.sceneLoad(index);//加载背景
this.textLoad(index);//加载文字
game.input.onDown.addOnce(function () {
this.index++;
this.nextPage();
}, this);
} else {
game.state.start(this.nextScene);
}
}
// 加载背景
PageMain.prototype.sceneLoad = function(index) {
var dataScene = this.data[index].scene;
var _scene = game.add.sprite(0, 0, dataScene);
_scene.width = game.world.width;
_scene.height = game.world.height;
}
// 加载文本
PageMain.prototype.textLoad = function(index) {
var dataText = this.data[index].text;
var line = '';
// 文本背景
var _bar = game.add.sprite(0, game.world.height - 216, 'txt_bg');
_bar.width = game.world.width;
_bar.height = 216;
// 逐字渲染
var _text = game.add.text(35, game.world.height - 175, '', _textStyle);
game.time.events.repeat(30, dataText.length, updateLine, this);
function updateLine() {
if (line.length < dataText.length) {
line = dataText.substr(0, line.length + 1);
_text.setText(line);
}
}
}
// 数据
var mainTxt = [{
text: '四面火起,马声长嘶。',
scene: '11',
},{
text: '据说五阿哥诬告你谋反!',
scene: '12'
},{
text: '你被一路追杀,你和贴身侍卫李将军准备一起逃离!',
scene: '13'
},{
text: '突然,射来一支箭,目标直指你的心脏。',
scene: '14'
},{
text: '在这危急的时刻,你看着身旁和你从小一起长大并拼死护送你的多年挚友,李将军...你萌发出了一个邪恶的念头:',
scene: '15'
}
]
//new实例化对象
var act01 = new PageMain(mainTxt, 'Acts02');