面向对象
2016-11-21 本文已影响11人
张Boy
在谈面向对象之前我们先了解一下原型概念,我们在实际应用中,原型是类的基础
原型
- 我们还是不谈那些文邹邹的东西——每一个对象都从原型继承属性,通过对象直接量创建的对象都有同一个原型对象Object.prototype,知道这些就可以了,如果想详细了解可以点击这里
类
- 我们用函数来封装类
- 牛刀小试-定义基类
function Button(){
var color = '#00FF00';
this.background = '#FF0000';
var.setColor = function(c){
color = c;
}
this.run = function(){
console.log('run');
}
}
Botton.prototype.click = function(){
console.log('click');
}
var btn = new Button();
console.log(btn.color) //undefined 私有变量
console.log(btn.background) //#FF0000 公共变量
btn.setColor('#0000FF'); //not a function 私有函数
btn.run() //run 公有方法 *与下面的protorype方法不同定义的不同,下面会看到
btn.click() //click 公有方法
//
console.log(btn.constructor == Button) //验证实例的构造函数原型
//
console.log(btn instanceof Button) //验证原型与实例关系
//
console.log(Button.prototype.isPrototypeOf(btn)) //验证原型和实例关系
//
console.log(btn.hasOwnProperty('background')) //判断属性是否是本地的或是继承来的
构造函数内变量和方法不共享,原型链上的函数共享
- 全继承
function iButton() {
Button.call(this); //这里可以使用apply,作用一样,只是参数的格式不同
}
//全部继承Button的构造函数
iButton.prototype = Button.prototype; //继承Button的原型链。
var ibtn = new iButton();
console.log(ibtn.background);
console.log(ibtn.click);
- 部分继承
function iButton() {
}
iButton.prototype = Button.prototype; //只继承Button的原型链。
iButton.prototype.constructor = iButton; //iButton的构造函数是自己本身
var ibtn = new iButton();
console.log(ibtn.background); //undefined
console.log(ibtn.click); //click
//
function iButton() {
Button.call(this); //call只能继承Button的构造函数
}
var ibtn = new iButton();
console.log(ibtn.background); //#FF0000
console.log(ibtn.click); //not a function
- 多态
这个概念其实就比较简单了,封装函数预留参数,通过对参数类型和内容的判断来执行不同的操作来实现。这里就不做案例了。