详解js面向对象编程

转自:http://segmentfault.com/a/1190000000713346

基本概念

ECMA关于对象的定义是:”无序属性的集合,其属性可以包含基本值、对象或者函数。“对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。

在现实生活中,相似的对象之间往往都有一些共同的组成特征。类,实际上是对象的设计蓝图或者制作配方。我们能基于相同的类创建出许多不同的对象,这些对象又会含有各自的属性和方法。

封装

封装主要用于阐述对象中所包含(或封装的内容),它通常由两部分组成:

  1. 相关的数据(用于存储属性)
  2. 基于这些数据所能做的事(所能调用的方法)

聚合

聚合是指我们将现有对象合并成一个新对象的过程。例如:Book是由一个或多个author对象,publisher对象、若干chapter对象等组合而成的对象。

继承

通过继承这种方式,我们可以非常优雅地实现对现有代码的重用。例如:我们定义了一个Person对象,他包含了wolk(),sleep(),speak(),eat()等方法,也包含了age,height,weight等属性,这时当我们再定义一个coder对象的时候,你不必将上述的属性和方法都重写一遍,你只需继承他即可,然后你只需将coder这个对象属于他自己的那部分特殊功能写出来。

多态

上述实例中,我们的coder对象继承了person对象的一些属性和方法,这意味着这两个对象都实现了"speak"等方法,现在,我们的代码中有一个叫做James的变量,即便是我们不知道它是一个person对象还是一个coder对象的情况下,也依然可以直接调用该对象的"speak"方法
。类似这种不同对象通过相同的方法调用实现各自行为的能力,我们就称之为“多态”

创建对象

我们可以通过对象直接量、new关键字和object.create()函数来创建。

对象直接量

创建对象最简单的方法就是在js中使用对象直接量,它是由若干名/值对组成的映射表,名/值对中间用冒号分隔,多个名/值对用逗号分隔。整个映射表用花括号({})括起来。

var empty = {};//没有任何属性的对象
var fruits = {apple:big , orange:yellow};

var company = {
    CEO : "Tim Cook",//属性名字里有空格,必须用字符串表示
    Designer:"Ive";
    "for":"all audiences",//"for"是保留字,必须用引号
    employees:{
        firstname:"David",    //这里的属性名都没有引号
        lastname:"fill" //这个属性的值是一个对象
    }
};

对象里还可以嵌套对象(company里嵌套了employees对象)

new关键字创建对象

关键字new后面跟随一个函数调用,这个函数称为构造函数(constructor)javascript语言核心的原始类型都包含内置的构造函数。

<script type="text/javascript">
    var obj = new Object();//创建一个空对象,和{}一样
    var arr = new Array();//创建一个空数组,和[]一样
</script>

js原型->参照:javascript学习总结(五)原型和原型链详解

工厂模式

由于ECMAScript中无法创建类,因此,开发人员发明了一种函数,用函数来封装以特定接口创建对象的细节:

<script type="text/javascript">
    var Car = (function(){
        var Car = function(model,year,miles){
            this.model = model;
            this.year = year;
            this.miles = miles;
        };

        return function(model,year,miles){
            return new Car(model,year,miles);
        }
    })();

    var Benz = new Car("Benz",2014,1000);
    var Audi = new Car("Audi",2013,800);
</script>

什么时候使用工厂模式?

以下几种情景下工厂模式特别有用:

对象的构建十分复杂
需要依赖具体环境创建不同实例
处理大量具有相同属性的小对象

元素、属性和方法

说到数组,我们常说其中包含的是元素,而当说到对象的时候,我们常会说其中包含的是属性。另外,对象的属性也可以是一个函数,因为函数本身也是一种数据,在这种情况下,我们会称该属性为方法:

<script type="text/javascript">
    var wolf = {
        name :wolffy;
        run:function(){
            alert("?wolf,wolf!");
        }
    }
</script>

调用对象方法

<script type="text/javascript">
    var parrot = {
        name : "bage",
        hair : "brown",
        say : function(){
            alert( ‘I am ‘ + parrot.name);
        }
    }
    parrot.say();
</script>

注:

 1. 尽量使用点号表示法来访问对象的属性和方法。
 2. 不要在对象中使用带引号的属性标示。

构造器函数

另外,我们还可以使用构造器函数的方式来创建对象。看下面一个例子:

<script type="text/javascript">
    function Person(name,age,occupation){
        this.name = name;
        this.age = age;
        this.occupation = occupation;
        this.sayName = function(){
            alert(this.name);
        }
    }

    var person1 = new Person("trigkit4",21,"student");
    var person2 = new Person("Jack",25,"Engineer");
</script>

优点

使用构造器函数的好处在于,它可以在创建对象时接收一些参数。按照惯例,构造函数的函数名应始终以一个大写字母开头,以区分普通函数。

区别

构造函数与普通函数的区别在于调用的方式不同,任何函数,只要通过new操作符来调用,那它就可以作为构造函数。

缺点

使用构造函数的主要问题是,每个方法都要在每个实例上重新创建一遍。

扩展阅读:javascript学习总结(五)原型和原型链详解

全局对象

事实上,程序所在的宿主环境一般都会为其提供一个全局对象,而所谓的全局变量其实都只不过是该对象的属性罢了。

例如,当程序所在的宿主环境是web浏览器时,它所提供的全局对象就是window了。

内建对象

内建对象大致分为三组:

  • 数据封装类对象——包括Object、Array、Boolean、Number和String。这些对象代表着javascript中不同的数据类型,并且都拥有各自不同的typeof返回值,以及undefinednull状态
  • 工具类对象——包括Math、Date、RegExp等用于提供遍历的对象
  • 错误类对象——包括一般性错误对象及其它各种更特殊的错误类对象

Object是js中所有对象的父级对象,这意味着我们创建的所有对象都继承于此。

所谓的空对象实际上并不是完全无用的,它还是包含了一些属性和方法的:

  • 返回构造器函数的构造器属性
  • 返回对象描述字符串的toString()方法
  • 返回对象单值描述信息的valueOf()方法

例如:

var o = new Object();
o.toString();//[object Object]

Array

Array()是一个用来构建数组的内建构造器函数。数组主要由如下三种创建方式:

array = new Array()
array = new Array([size])
array = new Array(element0, element1, ..., elementN)

Array 对象方法
方法                 描述

concat()    连接两个或更多的数组,并返回结果。
join()      把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()       删除并返回数组的最后一个元素
push()      向数组的末尾添加一个或更多元素,并返回新的长度。
reverse()   颠倒数组中元素的顺序。
shift()     删除并返回数组的第一个元素
slice()     从某个已有的数组返回选定的元素
sort()      对数组的元素进行排序
splice()    删除元素,并向数组添加新元素。
toSource()  返回该对象的源代码。
toString()  把数组转换为字符串,并返回结果。
toLocaleString()    把数组转换为本地数组,并返回结果。
unshift()   向数组的开头添加一个或更多元素,并返回新的长度。
valueOf()   返回数组对象的原始值

concat()方法:合并数组

[1,2]concat([3,4],[5,6]);//[1,2,3,4,5,6]

join()方法:

<script type="text/javascript">
    var a = [1,2,3];
    a.join("");// =>"123"
</script>

pop()方法:移除数组最后一个元素,并将其返回

<script type="text/javascript">
    var fruits = [‘apple‘,‘banana‘,‘pineapple‘];
    fruits.pop();// pineapple
    console.log(fruits);//["apple","banana"]
</script>

shift()方法:删除并返回数组的第一个元素。

<script type="text/javascript">
    var a = [1,2,3];
    a.shift();//1
    console.log(a);//[2,3]
</script>

slice(start,end)方法:截取数组的某一部分,不会对原数组进行任何修改

<script type="text/javascript">
     var num = [‘a‘,‘b‘,‘c‘,‘d‘,‘e‘];
     console.log(num.slice(1,4));//["b","c","d"]
     console.log(num);//["a","b","c","d","e"]
</script>

splice(start,delete_count,i1,i2…)方法:删除数组元素的同时添加新的元素。i1,i2为要插入的新元素

<script type="text/javascript">
    var arr = [‘js‘,‘css‘,‘html‘,‘php‘,‘c‘];
    arr.splice(1, 2,‘python‘,‘jquery‘);//["css","html"]
    console.log(arr);//["js","python","jquery""php","c"]
</script>

Array对象属性
属性              描述
constructor     返回对创建此对象的数组函数的引用。
length          设置或返回数组中元素的数目。
prototype       使您有能力向对象添加属性和方法。

DOM和BOM

window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象

有关BOM和DOM的讨论,详见我这篇文章:javascript学习总结(三)BOM和DOM详解

函数

有关函数部分的讨论,详见我这篇文章:javascript学习总结(四)function函数部分



这里讨论下几个js的内建函数:

parseInt() 函数可解析一个字符串,并返回一个整数。

parseInt(string, radix)

radix:进制基数,其默认值是10(即十进制)。

parseInt(‘10e+3‘);//10
parseInt(‘FF‘);//NaN
parseInt(‘FF‘,16)//255

parseFloat():将接受的参数转换成浮点值并返回。

parseFloat(‘123.456t‘);//123.456

isNaN():该函数是“is Not a Number”的缩写,用于判断其参数是否是一个有效数字,如果是就返回true,否则返回false。

补充:

自执行函数:保证全局命名空间不被污染的模式。通过把代码装在一个匿名函数中并立刻自行调用。如此一来,该函数中的所有变量都是局部的(假设使用了var关键字)。

(function(){
    //code
})();//最后一个圆括号用于执行

有关这部分,也可参加我的另一篇文章:详解js闭包

JSON

详见:javascript学习总结(六)数据类型和JSON格式

style对象

style.display = "";是清除`display`样式,`display`将使用默认值(块元素会变成block,内联元素会变成inline)
style.display="none"; 中“none”是一个值,表示元素将隐藏
时间: 2024-10-11 01:11:54

详解js面向对象编程的相关文章

简单粗暴地理解js原型链--js面向对象编程

简单粗暴地理解js原型链--js面向对象编程 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗

js面向对象编程:如何实现方法重载

js中如何实现方法重载?这涉及到三个问题 1同名函数的调用问题 2函数中特殊的参数arguments 3如何利用arguments实现方法重载 1同名函数的调用问题 都知道在js中如果存在多个名称相同的函数,则调用实际每次都只使用最后一个,js其实是没有重载的,也就是说,如果定义了多个同名的函数,单参数不一样,在调用时,js不管参数个数,只管前后顺序 例如: function test1(arg1) { alert("参数1:"+arg1); } function test1(arg1

js面向对象编程:如何定义常量?

js中有一个关键字const,但目前的浏览器似乎还不支持,如果一定要定义一些常量,其实可以使用闭包,匿名函数实现常量的定义. 例如: var Class = (function() { var UPPER_BOUND = 100;//定义了常量 var Test={}; // 定义了一个静态方法 获取常量的方法 Test.getUPPER_BOUND=function() { return UPPER_BOUND; } return Test; })(); 用法: var k=Class.get

js面向对象编程:两个小括号的使用

在查看很多jQuery的过程中,经常遇到两个小括号的情况. 例如: (function() { alert("测试1"); })(); (function() { alert("测试3"); }()); 其实这段代码,就是定义了一个匿名函数,并且进行了调用, 相当于如下几行代码: (function ListCommon2() { alert("测试1"); })(); (function ListCommon3() { alert("

js面向对象编程:this到底代表什么?

在js中this的用法很让人迷惑,有些像Java或者C#中的this,但又不完全一样.按照流行的说法this总是指向调用方法的对象. 1.纯粹函数调用. function ListCommon2(x) { this.x=x; alert("this 是 ListCommon2"+(this instanceof ListCommon2)); alert("this.constructor"+this.constructor); } function test(){

详解js变量、作用域及内存

详解js变量.作用域及内存 来源:伯乐在线 作者:trigkit4 原文出处: trigkit4 基本类型值有:undefined,NUll,Boolean,Number和String,这些类型分别在内存中占有固定的大小空间,他们的值保存在栈空间,我们通过按值来访问的. JavaScript 1 2 (1)值类型:数值.布尔值.null.undefined. (2)引用类型:对象.数组.函数. 如果赋值的是引用类型的值,则必须在堆内存中为这个值分配空间.由于这种值的大小不固定(对象有很多属性和方

详解js和jquery里的this关键字

详解js和jquery里的this关键字 js中的this 我们要记住:this永远指向函数运行时所在的对象!而不是函数被创建时所在的对象.this对象是在运行时基于函数的执行环境绑定的,在全局环境中,this等于window 先来看个例子: <script> var fullname = "Trigkit4"; var person = { fullname : 'Jack', prop:{ fullname : 'Blizzard', getFullname : fun

js面向对象编程:如何检测对象类型

在js中检测对象类型主要有三种,typeof,instanceof,constructor,这几种都可以检测对象的类型,但又有一定的区别.   1使用typeof检测对象类型. typeo作为最常用的检测类型的方法,返回字符串类型,具体使用如下: function testType(value) { var str=typeof(value); // alert(str); switch(str) { case 'undefined': // undefined类型 case 'object'

详解C# 网络编程系列:实现类似QQ的即时通信程序

引言: 前面专题中介绍了UDP.TCP和P2P编程,并且通过一些小的示例来让大家更好的理解它们的工作原理以及怎样.Net类库去实现它们的.为了让大家更好的理解我们平常中常见的软件QQ的工作原理,所以在本专题中将利用前面专题介绍的知识来实现一个类似QQ的聊天程序.  一.即时通信系统 在我们的生活中经常使用即时通信的软件,我们经常接触到的有:QQ.阿里旺旺.MSN等等.这些都是属于即时通信(Instant Messenger,IM)软件,IM是指所有能够即时发送和接收互联网消息的软件. 在前面专题