山山未迟

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

image

image

 

JavaScript巩固与加强三

目录

JavaScript巩固与加强三.................................................................................................... 1

一、面向对象................................................................................................................... 2

1、面向对象发展历程................................................................................................ 2

2、面向对象中的两个概念......................................................................................... 2

3、JavaScript常用系统类........................................................................................... 2

1)String类(字符串类)................................................................................... 2

2)Date类(日期时间类)................................................................................. 2

3)Math(数学类)........................................................................................... 2

二、Javascript中的自定义类............................................................................................. 2

1、Javascript自定义类创建方式................................................................................. 2

2、自定义对象创建流程............................................................................................ 2

3、为什么需要创建对象............................................................................................ 2

4、Javascript中的属性............................................................................................... 2

5、属性可以保存的数据类型..................................................................................... 2

6、在Javascript中,一切都是对象............................................................................ 2

7、面向对象中的三大关键词..................................................................................... 2

8、思考题:.............................................................................................................. 2

三、对象在内存中的存储形式.......................................................................................... 2

1)值类型................................................................................................................. 2

2)引用类型.............................................................................................................. 2

四、Javascript中this指针................................................................................................. 2

1、this指针............................................................................................................... 2

2、深入探讨Javascript中是this指针......................................................................... 2

3、思考题................................................................................................................. 2

4、对象间传值.......................................................................................................... 2

五、属性遍历与删除........................................................................................................ 2

1、使用for…in…遍历自定义对象属性......................................................................... 2

2、使用for…in…结构实现系统对象的遍历.................................................................. 2

3、属性删除操作....................................................................................................... 2

六、成员方法................................................................................................................... 2

七、json对象................................................................................................................... 2

1、什么是json........................................................................................................... 2

2、基本语法.............................................................................................................. 2

3、快速入门.............................................................................................................. 2

4、json对象从“何”而来............................................................................................. 2

5、php与json............................................................................................................ 2

案例:通过php+json完成对历史上的今天api接口调用.............................................. 2

6、为json对象添加成员方法..................................................................................... 2

八、原型链...................................................................................................................... 2

1、什么是原型对象?................................................................................................ 2

2、原型对象作用?................................................................................................... 2

3、如何向原型对象中添加属性或方法....................................................................... 2

4、探讨:原型对象到底从何而来.............................................................................. 2

一、面向对象

1、面向对象发展历程

1)面向机器

2)面向过程(贝尔实验室开发出C语言之后)

function add() {}

function edit() {}

function del() {}

3)面向对象(设计思想)

function 咨询() {}

function 报名() {}

function 缴费(){}

function 分班() {}

oa系统分解(学生、咨询老师、管理员)

class 学生 {

function 咨询() {}

function 报名() {}

}

2、面向对象中的两个概念

类(对某类事务的描述)

对象(由类创建的实体)

3、JavaScript常用系统类

String、Date、Math

1)String类(字符串类)

l length :字符串长度

l indexOf(string) :查找某个字符(字符串)在字符串出现的位置

l substr(num1,[num2]):截取字符串

l toLowerCase() :把字符串转化为小写

l toUpperCase() :把字符串转化为大写

l replace(str1,str2):把str1替换为str2

2)Date类(日期时间类)

l getYear() :返回年份

l getFullYear() :返回完整年份

l getMonth() :返回月份(0-11)

l getDate() :返回当前日期(1-31)

l getDay() :返回星期几(0-6)

l getHours():返回小时

l getMinutes():返回分钟

l getSeconds() :返回秒数

l getMilliseconds():返回毫秒数

l getTime():返回格林时间到当前的时间戳

3)Math(数学类)

l ceil(数值) :返回大于或等于该数的最小整数

l floor(数值) :返回小于或等于该数的最大整数

l min(数值1,数值2,…):返回最小数

l max(数值1,数值2) :返回最大数

l pow(数值1,数值2) :返回数值1的数值2次方 2的2次方是4

l random() :返回0-1之间的随机小数

l round(数值) :返回四舍五入后整数

l sqrt(数值) :返回数值的平方根 4的开平方就是2

示例代码:

clip_image002

效果:

clip_image004

二、Javascript中的自定义类

例1:通过Javascript代码定义一个人的信息(姓名、年龄、婚否)

clip_image006

通过以上代码分析可知,三个变量实际上是一个整体,有联系的,但是在代码中我们无法体现出三者的联系。

例2:用面向对象的方式定义一个人的信息

clip_image008

1、Javascript自定义类创建方式

说明:在Javascript是没有类的定义语句,当系统中定义一个函数时,系统在加载后,会认为该函数是同名类下的构造函数(构造器)。

function Person() {}

当系统加载后,系统会认为Person函数是Person类下的构造函数(构造器),我们就可以通过该函数名称创建自定义对象。

var 对象 = new 类名();

class Person() {

public function Person() {

//该函数就是同名类下的构造函数

}

}

基本语法:

function 类名() {}

var 对象 = new 类名();

2、自定义对象创建流程

1)在内存中(堆内存)开辟存储区域

2)执行构造函数

示例代码:

clip_image010

3、为什么需要创建对象

答:为了保存更多的数据。

如何保存数据?答:通过属性保存数据

4、Javascript中的属性

基本语法:

对象.属性 = 属性的值

对象[属性] = 属性的值

5、属性可以保存的数据类型

数字 p1.age = 32;

字符串 p1.name = ‘王大锤’;

布尔值 p1.marry = false;

对象

window.document(对象)

6、在Javascript中,一切都是对象

var num = 10; //Number类的实例

var str =‘hello’;//String类的实例

var flag = true; //Bool类的实例

var per = new Person(); //自定义类

问题:在我们的javascript中定义一个函数,怎么能确定它是采用函数调用还是以构造器方式进行使用?

function abc() {}

window.abc();

说明:在Javascript中,一切都是对象,我们定义的函数如果是通过以上方式,其实也是采用面向对象方式进行调用的,因为我们在Javascript中定义的属性或方法都是向window对象中添加属性。

7、面向对象中的三大关键词

constructor:返回原型对象所指向的构造函数

typeof:查看当前对象的数据类型

instanceof:判断当前对象是否属于某个类

调用方式:

alert( p.constructor );

alert( typeof p );

alert( p instanceof person );

示例代码:主要用于判断对象信息,排错处理

clip_image012

8、思考题:

1)思考题:如果创建第二个对象,会拥有name和age属性吗???

var p1 = new Person();

p1.name = ‘zhangsan’;

p1.age = 30;

var p2 = new Person();

答:以上代码,运行后,我们发现p2对象并不会拥有p1对象的name和age属性。

原理如下:

clip_image014

三、对象在内存中的存储形式

1)值类型

Number、String、Bool、Undefined、Null

值类型在内存中的存储形式如下:

clip_image016

2)引用类型

Object对象

clip_image017

思考题2:如果创建第二个对象p2,使用p1为p2赋值会怎样?

var p1 = new Person();

p1.name = ‘zhangsan’;

p1.age = 30; var p2 = p1;

答:原理图如下:

clip_image019

思考题3、如果删除了p2对象,是否会影响到p1对象

p2 = null;

答:不会,原理图如下:

clip_image021

四、Javascript中this指针

回顾PHP代码中this指针:指向当前对象

在Javascript中,this指针:

问题:在Javascript中,我们的对象的属性都是动态添加,又没办法直接在创建对象时自动拥有类中的属性或方法?

答:可以,通过this指针

1、this指针

例1:通过this指针让我们的对象拥有类中的属性或方法

clip_image023

效果:

clip_image025

说明:通过以上代码运行可知:

在Javascript中,谁调用了函数,那么函数内部的this指针就指向哪里

例2:改进例1,让我们创建的对象自动拥有自己的属性

clip_image027

2、深入探讨Javascript中是this指针

其实,在Javascript全局变量中,也存在this指针,其指向window全局对象

clip_image029

思考题:

1、尝试理解下面两条语句:

i=10;

alert(this.i);//this指向window对象,this.i == window.i;

2、

function test(){

this.i=100;

}

i=10;

test();

alert(this.i);

示例代码:

clip_image031

运行结果:100

3、思考题

var i=100;

function test(){

i=200;

}

test()

alert(i);

结果:200

4、对象间传值

1)把对象作为函数的参数进行传递

2)把对象作为函数返回值

1)把对象作为函数的参数进行传递

例1:计算机长方形的面积(长*宽)

示例代码:实例化一个Person对象,再将该对象当做display的参数

clip_image033

运行结果:

clip_image035

2)把对象作为返回值返回

例2:计算两个数的四则运算(加减乘除)

clip_image037

运行结果:

clip_image039

posted on 2016-05-05 23:56  山山未迟  阅读(131)  评论(0编辑  收藏  举报