您的位置:

js面对对象实例(js基于对象)

js面对对象实例(js基于对象)

更新:

本文目录一览:

JS 的实例和对象的区别

关于js中实例和对象的解释如下: 比如定义persion如下: var person = new Object(); var person = {}; JS 是基于原型的面向对象语言, 所有数据都可以当作对象处理,所以 person 是对象, 可以把它当作是 Object 的实例. 当然, 一切都是对象。

JS 面向对象

为了能够清楚的解释这一切,我先从对象讲起。从其他面向对象语言(如Java)而来的人可能认为在JS里的对象也是由类来实例化出来的,并且是由属性和方法组成的。

实际上在JS里并不是如你所想(我开始是这么想的)那样,对象或直接称为object,实际上只是一些映射对的集合,像Map,字典等概念。JS里有大概7种类型(加上Symbol),数字、字符串、null、undefined、布尔、Symbol、对象。除对象以外的其他类型属于原始类型,就是说它们比较单纯,包含的东西比较少,基本上就是字面量所表示的那些(像C语言中的一些类型,就是占那么多空间,没有其他的东西)。object基本上是一些键值对的集合,属于引用类型,即是有一个名字去指向它来供别人使用的,就好像比较重的东西你拿不动,而只是拿了张记录东西所在地的纸条。所以当A对象里嵌套了B对象,仅表示A里面有一个引用指向了B,并不是真正把B包含在A里面,虽然看起来是这样(尤其是从对象的字面量上来看),所以才会有所谓的深拷贝与浅拷贝。

有句话叫“JavaScript里一切皆对象”,是因为在很多情况下原始类型会被自动的转为对象,而函数实际上也是对象,这样这句话看起来就很有道理了。

说明对象的本质是为了正确地认识对象,因为这关系到后面的理解。

JS基于面向对象实现的拖拽库实例

本文实例讲述了JS基于面向对象实现的拖拽库。分享给大家供大家参考。具体如下:

这是一个面向对象的JS拖拽库,可设置水平锁定、垂直锁定、锁定位置、锁定范围等,设定这些范围后,只能在设定的模式下拖动,我觉得这是个挺不错的拖拽实例。

运行效果截图如下:

在线演示地址如下:

具体代码如下:

!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

""

html

xmlns=""

head

meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

/

title拖拽库/title

style

type="text/css"

div,h2,p{margin:0;padding:0;}

body{font:14px/1.5

arial;}

#box{width:100px;height:100px;background:#fef4eb;padding:5px;margin:50px;border:1px

solid

#f60;}

#box

.title{height:25px;background:#f60;}

#tool{margin-bottom:10px;}

/style

script

type="text/javascript"

function

Drag()

{

//初始化

this.initialize.apply(this,

arguments)

}

Drag.prototype

=

{

//初始化

initialize

:

function

(drag,

options)

{

this.drag

=

this.$(drag);

this._x

=

this._y

=

0;

this._moveDrag

=

this.bind(this,

this.moveDrag);

this._stopDrag

=

this.bind(this,

this.stopDrag);

this.setOptions(options);

this.handle

=

this.$(this.options.handle);

this.maxContainer

=

this.$(this.options.maxContainer);

this.maxTop

=

Math.max(this.maxContainer.clientHeight,

this.maxContainer.scrollHeight)

-

this.drag.offsetHeight;

this.maxLeft

=

Math.max(this.maxContainer.clientWidth,

this.maxContainer.scrollWidth)

-

this.drag.offsetWidth;

this.limit

=

this.options.limit;

this.lockX

=

this.options.lockX;

this.lockY

=

this.options.lockY;

this.lock

=

this.options.lock;

this.onStart

=

this.options.onStart;

this.onMove

=

this.options.onMove;

this.onStop

=

this.options.onStop;

this.handle.style.cursor

=

"move";

this.changeLayout();

this.addHandler(this.handle,

"mousedown",

this.bind(this,

this.startDrag))

},

changeLayout

:

function

()

{

this.drag.style.top

=

this.drag.offsetTop

+

"px";

this.drag.style.left

=

this.drag.offsetLeft

+

"px";

this.drag.style.position

=

"absolute";

this.drag.style.margin

=

"0"

},

startDrag

:

function

(event)

{

var

event

=

event

||

window.event;

this._x

=

event.clientX

-

this.drag.offsetLeft;

this._y

=

event.clientY

-

this.drag.offsetTop;

this.addHandler(document,

"mousemove",

this._moveDrag);

this.addHandler(document,

"mouseup",

this._stopDrag);

event.preventDefault

event.preventDefault();

this.handle.setCapture

this.handle.setCapture();

this.onStart()

},

moveDrag

:

function

(event)

{

var

event

=

event

||

window.event;

var

iTop

=

event.clientY

-

this._y;

var

iLeft

=

event.clientX

-

this._x;

if

(this.lock)

return;

this.limit

(iTop

(iTop

=

0),

iLeft

(iLeft

=

0),

iTop

this.maxTop

(iTop

=

this.maxTop),

iLeft

this.maxLeft

(iLeft

=

this.maxLeft));

this.lockY

||

(this.drag.style.top

=

iTop

+

"px");

this.lockX

||

(this.drag.style.left

=

iLeft

+

"px");

event.preventDefault

event.preventDefault();

this.onMove()

},

stopDrag

:

function

()

{

this.removeHandler(document,

"mousemove",

this._moveDrag);

this.removeHandler(document,

"mouseup",

this._stopDrag);

this.handle.releaseCapture

this.handle.releaseCapture();

this.onStop()

},

//参数设置

setOptions

:

function

(options)

{

this.options

=

{

handle:

this.drag,

//事件对象

limit:

true,

//锁定范围

lock:

false,

//锁定位置

lockX:

false,

//锁定水平位置

lockY:

false,

//锁定垂直位置

maxContainer:

document.documentElement

||

document.body,

//指定限制容器

onStart:

function

()

{},

//开始时回调函数

onMove:

function

()

{},

//拖拽时回调函数

onStop:

function

()

{}

//停止时回调函数

};

for

(var

p

in

options)

this.options[p]

=

options[p]

},

//获取id

$

:

function

(id)

{

return

typeof

id

===

"string"

?

document.getElementById(id)

:

id

},

//添加绑定事件

addHandler

:

function

(oElement,

sEventType,

fnHandler)

{

return

oElement.addEventListener

?

oElement.addEventListener(sEventType,

fnHandler,

false)

:

oElement.attachEvent("on"

+

sEventType,

fnHandler)

},

//删除绑定事件

removeHandler

:

function

(oElement,

sEventType,

fnHandler)

{

return

oElement.removeEventListener

?

oElement.removeEventListener(sEventType,

fnHandler,

false)

:

oElement.detachEvent("on"

+

sEventType,

fnHandler)

},

//绑定事件到对象

bind

:

function

(object,

fnHandler)

{

return

function

()

{

return

fnHandler.apply(object,

arguments)

}

}

};

//应用

window.onload

=

function

()

{

var

oBox

=

document.getElementById("box");

var

oTitle

=

oBox.getElementsByTagName("h2")[0];

var

oSpan

=

document.getElementsByTagName("span")[0];

var

oDrag

=

new

Drag(oBox,

{handle:oTitle,

limit:false});

var

aInput

=

document.getElementsByTagName("input");

//锁定范围接口

aInput[0].onclick

=

function

()

{

oDrag.limit

=

!oDrag.limit;

this.value

=

oDrag.limit

?

"取消锁定范围"

:

"锁定范围"

};

//水平锁定接口

aInput[1].onclick

=

function

()

{

oDrag.lockX

=

!oDrag.lockX;

this.value

=

oDrag.lockX

?

"取消水平锁定"

:

"水平锁定"

};

//垂直锁定接口

aInput[2].onclick

=

function

()

{

oDrag.lockY

=

!oDrag.lockY;

this.value

=

oDrag.lockY

?

"取消垂直锁定"

:

"垂直锁定"

};

//锁定位置接口

aInput[3].onclick

=

function

()

{

oDrag.lock

=

!oDrag.lock;

this.value

=

oDrag.lock

?

"取消锁定位置"

:

"锁定位置"

};

//开始拖拽时方法

oDrag.onStart

=

function

()

{

oSpan.innerHTML

=

"开始拖拽"

};

//开始拖拽时方法

oDrag.onMove

=

function

()

{

oSpan.innerHTML

=

"left:"

+

this.drag.offsetLeft

+

",

top:"

+

this.drag.offsetTop

};

//开始拖拽时方法

oDrag.onStop

=

function

()

{

oSpan.innerHTML

=

"结束拖拽"

};

};

/script

/head

body

div

id="tool"

input

type="button"

value="锁定范围"

/

input

type="button"

value="水平锁定"

/

input

type="button"

value="垂直锁定"

/

input

type="button"

value="锁定位置"

/

/div

p拖放状态:span未开始/span/p

div

id="box"

h2

class="title"/h2

/div

/body

/html

希望本文所述对大家的JavaScript程序设计有所帮助。

js面向对象的几种方式

JavaScript中对象的创建有以下几种方式:

(1)使用内置对象

(2)使用JSON符号

(3)自定义对象构造

一、使用内置对象

JavaScript可用的内置对象可分为两种:

1,JavaScript语言原生对象(语言级对象),如String、Object、Function等;

2,JavaScript运行期的宿主对象(环境宿主级对象),如window、document、body等。

我们所说的使用内置对象,是指通过JavaScript语言原生对象的构造方法,实例化出一个新的对象。如:

复制代码 代码如下:

var str = new String("实例初始化String");

var str1 = "直接赋值的String";

var func = new Function("x","alert(x)");//示例初始化func

var o = new Object();//示例初始化一个Object

二、使用JSON符号

(i)何谓JSON ?

JSON (JavaScript Object

Notation)即JavaScript对象命名,是一种轻量级的数据交换格式,易于阅读和编写,同时也易于及其解析和生成。它基于

《JavaScript Programming Language, Standard ECMA-262 3rd Edition -

December 1999》的一个子集。JSON是完全独立于语言的文本格式,因此成为数据交换的理想格式。

JSON作为

JavaScript的一个自己,同时ActionScript、C、C#、ColdFusion、E、Java、JavaScript、ML、

ObjectiveCAML、Perl、PHP、Python、Rebol、Ruby、Lua等一系列的语言都提供支持,使得JSON成为Ajax开发的

首选方案。

JSON有两种构建方式,一种是采用简单的“键/值对”的集合,在不同的语言中被理解为对象、记录、结构、字典、哈希表、有键列表,或者关联数组等,另一种采用有序的值列表,大部分语言把它理解为数组。

常用的创建方式是第一种,即采用“键/值对”集合的形式。在这种形式下,一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号),“

‘键/值' 对”之间使用“,”(逗号)分隔。

JSON具有以下特点:(1)简单格式化的数据交换;(2)易于人们的读写习惯;(3)易于机器的分析和运行。

在JavaScript中,JSON被理解为对象。通过字符串形式的JSON,数据可以很方便地解析成JavaScript独享,并进行数据的读取传递。通过JSON,在一定程度上客服了JavaScript对象无法作为参数系列化传递的问题。

1,简单的JSON

{name:"刘德华",age:"25",sex:"男"}

2,JSON值的类型

JSON的值可以是简单的数据类型,例如数字、浮点、字符等,也可以是数组及对象。例如以数组作为member键值的JSON:

{member:[{name:"刘德华"},{name:"郭富城"},{name:"张学友"},{name:"黎明"}]}

{

book:[{name:"三国演义"},{name:"西游记"},{name:"水浒传"},{name:"红楼梦"}],

author:[{name:"罗贯中"},{name:"吴承恩"},{name:"施耐安",{name:"曹雪芹"}}]

}

3,在JavaScript中使用JSON

JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或者工具包,JavaScript默认将JSON当做一个对象处理。

将对象传递给一个变量,例如:

复制代码 代码如下:

var somebooks = {

book:[{name:"三国演义"},{name:"西游记"},{name:"水浒传"},{name:"红楼梦"}],

author:[{name:"罗贯中"},{name:"吴承恩"},{name:"施耐安",{name:"曹雪芹"}}]

}

JSON的每个“键”相当于对象的属性,例如访问book中的第一个条目,在JavaScript中,就可以简单地使用“somebooks.book[0].name”来获取“三国演义”这个值。

我们不但可以将一个JSON字符串转化为对象,反过来将一个对象“编译”为一个JSON字符串,以方便JavaScript中的对象的传输。例如:

复制代码 代码如下:

var Animals = new Object();

Animals.name = "dog";

Animals.sex = "Male";

Animals.age = "2";

Animals对象无法被序列化传输,将Animals对象转化为JSON字符串,也就是“{name:"dog",sex:"Male",age:"2"}”。这样,把该JSON字符串作为HTTP请求的一个参数传递,从而达到序列化传输Animals对象的目的。

(ii)JSON通过字符串形式来表达JavaScript的对象。如:

复制代码 代码如下:

var myObject = {nickname:"my girlfried",name:"big

pig"};

JSON

实际上充当了一种在JavaScript对象和字符串之间实现相互转换的协议。由于JSON的“外表”可以看成但村的字符串,因此JSON在

JavaScript的对象传输方面可以起到一定的作用。例如把对象strObject转换成字符串后进行传输,在达到目的地后通过eval方法将其还原

成对象:

复制代码 代码如下:

function test (o)

{

alert (o.name)

}

var strObject = '{nickname:"my girlfriend",name:"big pig"}';

test (eval_r("(" + strObject + ")"));

三、自定义对象构造

创建高级对象构造有两种方式:使用“this”关键字构造、使用原型prototype构造。如:

复制代码 代码如下:

//使用this关键字定义构造的上下文属性

function Girl()

{

this.name = "big pig";

this.age = 20;

this.standing;

this.bust;

this.waist;

this.hip;

}

//使用prototype

function Girl(){}

Girl.prototype.name = "big pig";

Girl.prototype.age = 20;

Girl.prototype.standing;

Girl.prototype.bust;

Girl.prototype.waist;

Girl.prototype.hip;

alert(new Girl().name);

上例中的两种定义在本质上没有区别,都是定义“Girl”对象的属性信息。“this”与“prototype”的区别主要在于属性访问的顺序。如:

复制代码 代码如下:

function Test()

{

this.text = function()

{

alert("defined by this");

}

}

Test.prototype.test = function()

{

alert("defined by prototype");

}

var _o = new Test();

_o.test();//输出“defined by this”

当访问对象的属性或者方法是,将按照搜索原型链prototype

chain的规则进行。首先查找自身的静态属性、方法,继而查找构造上下文的可访问属性、方法,最后查找构造的原型链。

“this”

与“prototype”定义的另一个不同点是属性的占用空间不同。使用“this”关键字,示例初始化时为每个实例开辟构造方法所包含的所有属性、方法

所需的空间,而使用“prototype”定义,由于“prototype”实际上是指向父级的一种引用,仅仅是个数据的副本,因此在初始化及存储上都比

“this”节约资源。

js面对对象实例(js基于对象)

本文目录一览: 1、JS 的实例和对象的区别 2、JS 面向对象 3、JS基于面向对象实现的拖拽库实例 4、js面向对象的几种方式 JS 的实例和对象的区别 关于js中实例和对象的解释如下: 比如定义

2023-12-08
js实例对象打印(js 打印对象)

本文目录一览: 1、为什么node.js中有的对象不能够打印出来 2、求一个js方法,能够打印任何对象所有属性值。最好有参数可指定子对象的层次。 好用有现金红包报酬,多 3、js怎么打印object

2023-12-08
json格式的对象实例(js json对象)

本文目录一览: 1、js创建对象的几种方式及JSON 2、java中,json格式的字符串转换成对象 3、json和对象转换的实现方式有几种 js创建对象的几种方式及JSON 创建对象两种常用的方法:

2023-12-08
面向对象编程js(面向对象编程JAVA)

本文目录一览: 1、js是面向对象的编程语言吗 2、js 什么是面向对象 3、如何用javascript面向对象编程 js是面向对象的编程语言吗 是的,js是基于对象的,连他的function函数都是

2023-12-08
js对象实例讲解,js对象语法

2022-11-24
js对象数据库(js对象数据类型有哪些)

本文目录一览: 1、js 如何连接数据库 2、js怎样连接和调用mysql数据库? 3、js调用数据库里面的数据 4、javascript怎样操作数据库? 5、JAVASCRIPT如何操作数据库? j

2023-12-08
关于js对象实现宠物领养代码的信息

本文目录一览: 1、怎样在页面获取js对象的内容 2、如何遍历一个JS对象中的所有属性 3、在java中怎么利用多态实现对宠物类进行编号领养 4、js的一段代码解读 5、js面向对象的几种方式 怎样在

2023-12-08
js怎么取到php(js取对象中的对象)

本文目录一览: 1、js如何取php文件 中的值 2、在JS如何获取PHP的值?这当中应注意什么? 3、如何在js中调用php 4、js 如何获取值并传到php 5、js中如何获取php数组? js如

2023-12-08
js实现实例例子,js基础案例

2022-11-24
对象的实例化js,实例化对象的作用

本文目录一览: 1、js的实例化过程究竟是怎么样的 2、javascript实例化对象 3、javascript中什么叫对象实例化?什么是实例化 4、js实例化对象存在哪里了 js的实例化过程究竟是怎

2023-12-08
js接收java数组对象,js数组和对象

2022-11-17
js对象和java对象的不同的简单介绍

2022-11-23
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
js实例对象和普通对象的简单介绍

本文目录一览: 1、js实例化对象存在哪里了 2、javascript中的对象包括哪些 3、javascript实例化对象 4、浅谈js函数中的实例对象、类对象、局部变量(局部函数) js实例化对象存

2023-12-08
40个js实例(js什么是实例)

本文目录一览: 1、求JS分页实例或者servlet分页实例,最好有例子能直接运行看看效果 2、js中的数组应用实例 3、JavaScript学习笔记之数组基本操作示例 4、JS隐藏号码中间4位代码实

2023-12-08
实例对象转换成json(什么是变换对象)

本文目录一览: 1、如何将 javascript 对象转换成 json字符串 2、怎么把一个对象list集合转换成json 3、如何将数据实体转换为 JSON 字符串 4、如何把一个对象转换为json

2023-12-08
java对象与json的互换,js中对象与json对象的转换

2022-11-22
js添加对象

2023-05-17
js代码总结体会,js基础知识总结笔记

本文目录一览: 1、js到底难不难学? 2、JS 代码 求解释 可以详细的 说明一下 谢谢 3、浅谈js写轮播图的思路与心得 4、JavaScript与WEB前台开发课程实训总结怎么写 5、js中继承

2023-12-08
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08