Javascript重温OOP之面向对象

面向对象顺序设计（Object-oriented programming，OOP）是一种顺序设计范型，同时也是一种顺序开辟的要领。对象指的是类的实例。它将对象作为顺序的基础单位，将顺序和数据封装个中，以进步软件的重用性、灵活性和扩展性。——维基百科

平常面向对象包含：继续，封装，多态，笼统

对象情势的继续

浅拷贝

var Person = {
name: 'allin',
age: 18,
address: {
home: 'home',
office: 'office',
}
sclools: ['x','z'],
};
var programer = {
language: 'js',
};
function extend(p, c){
var c = c || {};
for( var prop in p){
c[prop] = p[prop];
}
}
extend(Person, programer);
programer.name; // allin
programer.address.home; // home
programer.address.home = 'house'; //house
Person.address.home; // house

从上面的效果看出，浅拷贝的缺点在于修正了子对象中援用范例的值，会影响到父对象中的值，由于在浅拷贝中对援用范例的拷贝只是拷贝了地点，指向了内存中同一个副本。

深拷贝

function extendDeeply(p, c){
var c = c || {};
for (var prop in p){
if(typeof p[prop] === "object"){
c[prop] = (p[prop].cOnstructor=== Array)?[]:{};
extendDeeply(p[prop], c[prop]);
}else{
c[prop] = p[prop];
}
}
}

应用递归举行深拷贝，这模样对象的修正就不会影响到父对象。

extendDeeply(Person, programer);
programer.address.home = 'allin';
Person.address.home; // home

应用call和apply继续

function Parent(){
this.name = "abc";
this.address = {home: "home"};
}
function Child(){
Parent.call(this);
this.language = "js";
}

ES5中的Object.create()

var p = { name : 'allin'};
var obj = Object.create(o);
obj.name; // allin

Object.create()作为new操作符的替换计划是ES5以后才出来的。我们也能够本身模仿该要领：

//模仿Object.create()要领
function myCreate(o){
function F(){};
F.prototype = o;
o = new F();
return o;
}
var p = { name : 'allin'};
var obj = myCreate(o);
obj.name; // allin

现在，各大浏览器的最新版本（包含IE9）都布置了这个要领。假如碰到老式浏览器，能够用下面的代码自行布置。

　　if (!Object.create) {
　　　　Object.create = function (o) {
　　　　　　 function F() {}
　　　　　　F.prototype = o;
　　　　　　return new F();
　　　　};
　　}

类的继续

Object.create()

function Person(name, age){}
Person.prototype.headCount = 1;
Person.prototype.eat = function(){
console.log('eating...');
}
function Programmer(name, age, title){}
Programmer.prototype = Object.create(Person.prototype); //竖立继续关联
Programmer.prototype.cOnstructor= Programmer; // 修正constructor的指向

挪用父类要领

function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.headCount = 1;
Person.prototype.eat = function(){
console.log('eating...');
}
function Programmer(name, age, title){
Person.apply(this, arguments); // 挪用父类的组织器
}
Programmer.prototype = Object.create(Person.prototype);
Programmer.prototype.cOnstructor= Programmer;
Programmer.prototype.language = "js";
Programmer.prototype.work = function(){
console.log('i am working code in '+ this.language);
Person.prototype.eat.apply(this, arguments); // 挪用父类上的要领
}

封装

定名空间

js是没有定名空间的，因而能够用对象模仿。

var app = {}; // 定名空间app
//模块1
app.module1 = {
name: 'allin',
f: function(){
console.log('hi robot');
}
};
app.module1.name; // "allin"
app.module1.f(); // hi robot

静态成员

function Person(name){
var age = 100;
this.name = name;
}
//静态成员
Person.walk = function(){
console.log('static');
};
Person.walk(); // static

私有与公有

function Person(id){
// 私有属性与要领
var name = 'allin';
var work = function(){
console.log(this.id);
};
//公有属性与要领
this.id = id;
this.say = function(){
console.log('say hello');
work.call(this);
};
};
var p1 = new Person(123);
p1.name; // undefined
p1.id; // 123
p1.say(); // say hello 123


模块化

var moduleA;
moduleA = function() {
var prop = 1;
function func() {}
return {
func: func,
prop: prop
};
}(); // 马上实行匿名函数

prop，func 不会被泄漏到全局作用域。或许另一种写法，运用 new

moduleA = new function() {
var prop = 1;
function func() {}
this.func = func;
this.prop = prop;
}

多态

模仿要领重载

arguments属性能够获得函数挪用的实参个数，能够应用这一点模仿要领的重载。

function demo(a, b ){
console.log(demo.length); // 获得形参个数
console.log(arguments.length); //获得实参个数
console.log(arguments[0]); // 第一个实参 4
console.log(arguments[1]); // 第二个实参 5
}
demo(4, 5, 6);

//完成可变长度实参的相加
function add(){
var total = 0;
for( var i = arguments.length - 1; i >= 0; i--){
total += arguments[i];
}
return total;
}
console.log(add(1)); // 1
console.log(add(1, 2, 3)); // 7
// 参数差别的状况
function fontSize(){
var ele = document.getElementById('js');
if(arguments.length == 0){
return ele.style.fontSize;
}else{
ele.style.fOntSize= arguments[0];
}
}
fontSize(18);
console.log(fontSize());
// 范例差别的状况
function setting(){
var ele = document.getElementById('js');
if(typeof arguments[0] === "object"){
for(var p in arguments[0]){
ele.style[p] = arguments[0][p];
}
}else{
ele.style.fOntSize= arguments[0];
ele.style.backgroundColor = arguments[1];
}
}
setting(18, 'red');
setting({fontSize:20, backgroundColor: 'green'});

要领重写

function F(){}
var f = new F();
F.prototype.run = function(){
console.log('F');
}
f.run(); // F
f.run = function(){
console.log('fff');
}
f.run(); // fff

笼统类

在组织器中 throw new Error(''); 抛非常。如许防备这个类被直接挪用。

function DetectorBase() {
throw new Error('Abstract class can not be invoked directly!');
}
DetectorBase.prototype.detect = function() {
console.log('Detection starting...');
};
DetectorBase.prototype.stop = function() {
console.log('Detection stopped.');
};
DetectorBase.prototype.init = function() {
throw new Error('Error');
};
// var d = new DetectorBase();// Uncaught Error: Abstract class can not be invoked directly!
function LinkDetector() {}
LinkDetector.prototype = Object.create(DetectorBase.prototype);
LinkDetector.prototype.cOnstructor= LinkDetector;
var l = new LinkDetector();
console.log(l); //LinkDetector {}__proto__: LinkDetector
l.detect(); //Detection starting...
l.init(); //Uncaught Error: Error

参考资料

Javascript 面向对象