资讯专栏INFORMATION COLUMN

详解js面向对象编程

lolomaco / 3310人阅读

摘要:看下面一个例子优点使用构造器函数的好处在于,它可以在创建对象时接收一些参数。按照惯例,构造函数的函数名应始终以一个大写字母开头,以区分普通函数。返回该对象的源代码。使您有能力向对象添加属性和方法。

基本概念

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

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

封装

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

相关的数据(用于存储属性)

基于这些数据所能做的事(所能调用的方法)

创建对象

我们可以通过对象直接量、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语言核心的原始类型都包含内置的构造函数。


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

工厂模式

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



什么时候使用工厂模式?

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

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

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


调用对象方法

注:

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

构造器函数

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


优点

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

区别

构造函数与普通函数的区别在于调用的方式不同,任何函数,只要通过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()方法:


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


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


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


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



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”是一个值,表示元素将隐藏


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87635.html

相关文章

  • JavaScript深入浅出

    摘要:理解的函数基础要搞好深入浅出原型使用原型模型,虽然这经常被当作缺点提及,但是只要善于运用,其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法,包括,,。商业转载请联系作者获得授权,非商业转载请注明出处。 怎样使用 this 因为本人属于伪前端,因此文中只看懂了 8 成左右,希望能够给大家带来帮助....(据说是阿里的前端妹子写的) this 的值到底...

    blair 评论0 收藏0
  • 【连载】前端个人文章整理-从基础到入门

    摘要:个人前端文章整理从最开始萌生写文章的想法,到着手开始写,再到现在已经一年的时间了,由于工作比较忙,更新缓慢,后面还是会继更新,现将已经写好的文章整理一个目录,方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理 从最开始萌生写文章的想法,到着手...

    madthumb 评论0 收藏0
  • 解决js面向对象编程的难题

    摘要:一面向对象编程简介定义,简称,是一种程序设计思想。好处维护简单模块化是面向对象编程中的一个特征。可扩充性面向对象编程从本质上支持扩充性。 一、面向对象编程简介 1.定义: Object Oriented Programming,简称OOP,是一种程序设计思想。OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数。 2.好处: (1)、维护简单:模块化是面向对象编程中的一个...

    ermaoL 评论0 收藏0
  • 区块链开发中使用的最流行的编程语言

    摘要:我们目前正处于一个新兴的区块链开发行业中。,一种在以太坊开发人员中流行的新的简单编程语言,因为它是用于开发以太坊智能合约的语言。它是全球至少万开发人员使用的世界上最流行的编程语言之一。以太坊,主要是针对工程师使用进行区块链以太坊开发的详解。 我们目前正处于一个新兴的区块链开发行业中。区块链技术处于初期阶段,然而这种颠覆性技术已经成功地风靡全球,并且最近经历了一场与众不同的繁荣。由于许多...

    2shou 评论0 收藏0

发表评论

0条评论

lolomaco

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<