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
时间: 2024-10-19 14:50:50

javascript 面向对象的基本概念及示例的相关文章

javascript面向对象(二)

创建对象 要创建一个对象我们可以用如下代码: var user = new Object(); user.name = '编程浪子'; user.age = 22; user.address = '四川成都'; 用这样的方法创建对象比较简单直观,也是JavaScript种创建对象最基本的方法.但是这样就有一个问题,如果我们需要创建多个对象,那么我就得写很多重复的代码.比如我们想创建另一个对象user1,我们就得重新将上面的代码重新写一遍,这在实际开发过程中是不合适的,这样如果对象过多,代码量将大

JavaScript面向对象之类的创建

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JS javascript面向对象的理解及简单的示例

javascript面向对象的理解及简单的示例 一. javascript面向对象概念: 为了说明 JavaScript 是一门彻底的面向对象的语言,首先有必要从面向对象的概念着手 , 探讨一下面向对象中的几个概念: 1.一切事物皆对象 2.对象具有封装和继承特性 3.对象与对象之间使用消息通信,各自存在信息隐藏 以这三点做为依据,C++ 是半面向对象半面向过程语言,因为,虽然他实现了类的封装.继承和多态,但存在非对象性质的全局函数和变量.Java.C# 是完全的面向对象语言,它们通过类的形式组

《Javascript面向对象精要》笔记

刚读过<Javascript面向对象精要>这本书,在现有的知识体系里面有一些新鲜的认识,记录一下. 原始类型和引用类型 Javascript存在两种类型:原始类型和引用类型.原始类型包括String.Number.Boolean.Null.Undefined,引用类型保存对象,其本质是对象所在内存位置的引用. 原始类型的赋值或者给函数传参,实际上都是传递原始类型值的拷贝: 引用类型则是引用的拷贝.修改其中一个引用的话,其他引用也会受到影响.如果对象中的某个属性也是对象,在对象拷贝时就会引入深拷

JavaScript面向对象精要(一)

传统面向对象的语言几大特征:封装.继承.多态,在JavaScript中并不适用.JavaScript的弱类型特征允许你用比其他语言更少的代码完成同样的任务.无需提前设计好类再进行编码.需要一个具有某个字段的对象了?随时随地都可创建.Nicholas C.Zakas著作<JavaScript面向对象精要>告知我们如何创建对象.定义自己的类型,使用继承以及其他各种操作来充分使用对象.总之,更全面理解和使用JavaScript所有的一切. 一.原始类型和引用类型 1. 什么是类型 JavaScrip

javascript面向对象创建高级 Web 应用程序

 目录 JavaScript 对象是词典 JavaScript 函数是最棒的 构造函数而不是类 原型 静态属性和方法 闭包 模拟私有属性 从类继承 模拟命名空间 应当这样编写 JavaScript 代码吗? 展望 最近,我面试了一个有五年 Web 应用程序开发经验的软件开发人员.四年半来她一直在从事 JavaScript 相关的工作,她自认为 JavaScript 技能非常好,但在不久之后我就发现实际上她对 JavaScript 知之甚少.话虽这样说,但我确实没有责备她的意思.JavaScrip

JavaScript 面向对象开发知识基础总结

JavaScript 面向对象开发知识基础总结 最近看了两本书,书中有些内容对自己还是很新的,有些内容是之前自己理解不够深的,所以拿出来总结一下,这两本书的名字如下: JavaScript 面向对象精要 JavaScript 启示录 如果对于 JavaScript 面向对象编程理解不够深的话,第一本书还是强烈推荐的.第二本书比较适合初中级的开发者阅读.对各种知识点都有代码示例.内容中规中矩. 1.JavaScript 中的变量类型和类型检测 C#和Java等编程语言用栈存储原始类型,用堆存储引用

JavaScript面向对象及相关知识

最近在学习JavaScript面向对象,写下自己的理解及相关资料,以备查阅. 一.面向对象中涉及的相关几个概念 1.作用域 所谓作用域,就是说属性和函数的可访问范围.在JavaScript中,作用域分为两种.全局作用域和局部作用域. 所有没有var 声明 或 定义于最外层函数和最外层函数外面即为全局作用域.也就是定义可以随意调用. 自定义函数内部用var声明的为局部作用域. var num = 1; //全局作用域 window.onload = function() { //最外层为全局作用域

javascript面向对象之this指针

下午用面向对象的方法写一个幻灯片插件的时候不小心写出了这样的代码: Slider.prototype.auto=function() { setInterval(this.toRun,4000);//注意 } Slider.prototype.toRun=function() { if(this.iNow==this.aA.length - 1) ...... } 在浏览器打开的时候发现幻灯片不能如预期般自动切换,控制台给出了这样的错误提示: this.aA isundefined?然而我已经在