一开始接触JavaScript的时候了解这是一门面向对象的语言,通过面向对象的方式构建了下面的代码
var View = function () {
this.height = 0;
this.width = 0;
this.background = '白色';
this.childs = [];
}
View.prototype.addChild = function (view) {
this.childs.push(view);
console.log('添加子视图');
}
var ButtonView = function() {
View.call(this);
}
ButtonView.prototype = Object.create(View.prototype);
ButtonView.prototype.onclik = function () {
console.log('点击了');
};
var button = new ButtonView();
button.onclik();
//点击了
var button2 = new ButtonView();
button.addChild(button2);
//添加子视图
后来正式系统的学了JavaScript才知道这语言和其他面向对象的语言是不同的,JavaScript是没有类和继承的概念的,能够不依靠类,构造出对象,上面代码是依靠prototype模仿了类和继承。
JavaScript 可以通过构造函数来创建对象, * 构造函数是要 new+一个函数 才是构造函数 *
var button = new ButtonView();
上面生成button对象分成四个步骤
- 创建一个空对象
var o = {}; - 将空对象的prototype赋值
o.prototype = ButtonView.prototype; - 将函数的this指向0执行函数 * 在
JavaScript函数中如果没有return默认就是return undefined在构造函数中如果return的不是一个引用类型的将return this* button = 函数返回的对象
这就是构造函数的大致过程,然后我要讲的就是第二步中的prototype
prototype是对象内置的一种属性,是一种对其他对象的引用属性,button.background操作的时候,首先对button对象进行检查是否有该属性,如果没有的话则会通过prototype访问委托对象,如果有原型对象有background属性则返回,没有则继续委托该原型的prototype直到Object.prototype,这样就形成了一条原型链。
如果对my进行set操作,比如button.background = '黑色',将会分成三种情况。
- 一般情况
prototype.background是可读写那么会直接在button对象赋值,这样访问background属性的时候因为button对象已经有了该属性,button.prototype - 如果
prototype.background只读,那么将无法设置background - 如果
prototype.background有Set方法那将直接执行set方法,无视上面两种情况
在写JavaScript代码的时候,我们应该抛开以前学习用类来设计的方法,虽然JavaScript可以模拟,但是不是最适合的,写起来总觉得别扭。JavaScript更适合通过委托的方式在编写。比如在一开始写的代码,改成通过委托对象的思维变换成下面代码
var View ={
height: 0,
width: 0,
background: '白色',
childs: [],
addChild: function (view) {
this.childs.push(view);
console.log('添加子视图');
}
}
var ButtonView = Object.create(View);
ButtonView.onclik = function () {
console.log('点击了');
};
var button = Object.create(ButtonView);
button.onclik();
//点击了
var button2 = Object.create(ButtonView);
button.addChild(button2);
//添加子视图
代码变得清晰多了
