首页 > 代码库 > javascript 面向对象的基本概念及示例

javascript 面向对象的基本概念及示例

面向对象javascript这个词其实有些多余, 因为Javascript这门语言就是完全面向对象的, 也不可能以非面向对象的方法来使用。 不过大多数编程新手(包括使用javascript的)的常见弱点在于按照功能编写代码, 而不考虑任何上下文或者组织。 

要完整理解如何编写最优化的javascript代码, 就必须

1) 理解javascript对象是如何工作的

2) 他们和其他语言的对象有何不同

3) 以及怎样使用才对你有益。

扯淡的部分完了, 下面干货来鸟。

1. 对象以及对象创建的方式

对象是javascript的基础。 事实上, 这门语言里所有的东西都是对象。 这门语言的大部分功能都是基于这一点。 对象是一系列属性的集合, 和其他语言里的散列表结构类似。

// By build-in Object.
var obj = new Object();
obj.val = 0;
obj.click = function(){
   console.log('click me...');
}

// By {}
var obj = {
  val: 0,
  click: function(){
    console.log('click me...');
  }
}

// By constructor
var Obj = function(){}
var obj1 = new Obj();
var obj2 = new obj1.constructor();
2. 公共方法

公共方法(public method)在对象的上下文中是最终用户始终可以接触到的。要实现在对象的每个实例中都可以使用的公共方法, 必须了解一个属性‘prototype’, 关于这个概念在后面的博文中会详细的阐述。

// Creates new object.
function User(name, age){
	this.name = name;
	this.age = age;
}

// Adds public method for User.
User.prototype.getName = function(){
	return this.name;
}
User.prototype.getAge = function(){
	return this.age;
}

// Test
var user = new User('Byorn', 20);
console.log(user.getName());
console.log(user.getAge());

3. 私有方法

私有方法(private method)定义一些只让对象内部访问, 而外部无法访问的代码。

function User(name, age){
	this.name = name;
	this.age = age;

	function showName(){
		console.log(name);
	}

	// call private method
	// show errors
	showName();
}

var user = new User('Byron', 20);
// Cannot call this metod
// will show error.
user.showName();
4. 特权方法

这个方法从字面上理解就感觉很屌的样子, 它到底屌在哪里?

特权方法(privileged method), 指代那些在查看并且处理(对象中)似有变量的同时允许用户以公共方法的方式访问。

function User(name, age){
	this.name = name;
	this.age = age;

	this.showName = function(){
		console.log(name);
	}
}

var user = new User('Byron', 20);
// We can get name of user by this way.
user.showName();
// But we cannot access the private variable 'name'
user.name() // show error.
5. 静态方法

稍微接触过点其他面向对象语言都很轻松的理解静态方法。 就是类里定义的静态方法。

静态方法的实质与任何其他一般的函数没有什么不同, 最主要的区别在于,其他函数是以对象的静态属性形式存在的。作为属性, 它们不能在该对象的示例的上下文中访问,而只属于对象本书的那个上下文中。(有点拗口, 且看下面的例子一定会让你豁然开朗)

function User(name, age){
	this.name = name;
	this.age = age;
}

// Static method.
User.clone = function(user){
	return new User(){
		user.getName,
		user.getAge
	}
}
6. 静态变量

对于静态方法自然会想到静态变量, 在javascript中怎样表示静态变量呢。 分为两种情况

1) 私有静态变量

这里牵扯到闭包的知识, 不懂的自行脑补。直接上代码:

// private static variable
            (function(){
            	var privateStaticVar = 'private static variable';

            	Func = function(){
            		this.setPrivateStaticVar = function(value){
            			privateStaticVar = value;
            		}
            		this.getPrivateStaticVar = function(){
            			return privateStaticVar;
            		}
            	}
            })();

            var func1 = new Func();
            var func2 = new Func();
            console.log(func1.getPrivateStaticVar());
            console.log(func2.getPrivateStaticVar());

            func1.setPrivateStaticVar('private');
            console.log(func1.getPrivateStaticVar());
            console.log(func1.getPrivateStaticVar());
2) 公共静态变量

这有点像公共静态方法了,上代码:

Func = function(){
        this.test = 'test';
    }
    Func.acfun= 'net';
    console.log(Func.acfun); //net

javascript 面向对象的基本概念及示例