学习笔记-JS公开课二

typeof运算符的使用

JS中内置对象Array/Date/Math/String可以看成引用类型

做如下测试：

<scripttype="text/javascript">

var arr = newArray();

alert(typeof arr);//objcet

alert(typeofArray); // function

var arr = newString();

alert(typeof arr);//objcet

alert(typeofString); // function

</script>

说明了我们其实可以通过function模拟类的定义的。

通过function模拟类的定义及使用

类表示具有相似性质的一类事物的抽象。

通过实例化一个类，能够得到一个类的对象。

<script>

function Person()

{

}

//使用new关键字创建自定义类的对象

var p = new Person();

alert(typeof p); // objcet

alert(typeof Person); //function

</script>

给对象添加属性和功能：

方式一：对象名.属性(方法)名

方式二：对象名.[“属性或方法名”]

自定义类如何添加属性和方法呢

添加属性和添加方法直接使用

p.name = ‘’ ;p.age = 23;

function show(){

}

p.start = show;

p.start(); // 调用

删除属性和方法：

p.name = undefined;

p.start = undefined;

自定义类把属性和方法定义在内部

使用this，this代表当前类的引用

<script>

function Person()

{

this.name= "Jerome";

}

var p = new Person();

alert(p.name);

</script>

创建js对象的简单方式

var obj = {}; //创建一个没有任何属性和方法的对象

alert(typeof obj); //object

//创建一个包含了三个属性和一个方法的对象

var user = {

name:"jerome",

age:23,

work:"teacher",

show:function(){

alert(this.name+ "***" +this.age+ "****" +this.work+"**");

}

}

user.show(); //Jerome***23***teatcher**

js实现私有成员和静态成员

在JS中模拟出私有成员，在JS中通过this把变量和方法与类关联上的，如果你自己使用var定义一个变量，或者直接定义一个方法，他会认为这个方法/变量与当前类无关。

<script>

functionPerson(name,age){

this.name = name;

this.age = age;

//定义一个变量

var sex = '女';

}

var p = newPerson('Jerome',23);

alert(p.name +p.age); //Jerome23

alert(p.sex); //undefined

</script>

是访问不到的。p.sex

可以通过这种方法访问。

<script>

function Person(name,age){

this.name= name;

this.age= age;

//定义一个变量

varsex = 'women';

setSex= function(){

sex= 'man';

}

this.changeSex= function(){

setSex();

}

this.getSex= function(){

returnsex;

}

}

var p = new Person('Jerome',23);

alert(p.getSex()); //women

p.changeSex();

alert(p.getSex()); // man

</script>

类的私有成员如何体现。

就是通过作用域不同来体现的。

但是一般不这样用，因为这样代码的阅读性非常差。

js中实现静态的方式

<script type="text/javascript">

functionPerson(name,age)

{

}

//js中也是有静态的概念存在的

//添加静态属性

Person.sex= "男";

//添加静态方法

Person.run= function()

{

alert("run");

}

//注意了：在js中，静态的内容只能被类名访问

alert(Person.sex);

Person.run();

//静态就是这么简单，通过类名直接添加属性或者方法，将来使用的时候也不能创建对象使用。

</script>

js中实现静态的方式

//在js中，大家应该记得 Math对象

//alert(Math.abs(-12)); //绝对值

//alert(Math.max(23,45)); //获取较大的值

//js中也是有静态的概念存在的

//添加静态属性

Person.sex = "男";

//添加静态方法

Person.run = function()

{

alert("run");

}

//注意了：在js中，静态的内容只能被类名访问

//var p = new Person("林青霞",26);

//alert(Person.sex);

//Person.run();

//静态就是通过类名直接添加属性或者方法，将来使用的时候也不能创建对象使用。

js原型的概述和模拟继承

<!--

js原型：prototype

在我们每个创建的函数中都有一个属性：prototype属性。原型属性。

它其实是一个对象,它的用途是把所有实例共享的属性和方法给包含起来。

我们也可以通过这个属性给对象添加新的属性和功能。

举例

照猫画虎：

虎.prototype =猫。

如果是这样的话，我们修改猫，那么，虎的动作也就被修改了。

通过这个原型属性，等会我们就可以模拟继承。

-->

<script type="text/javascript">

functionPerson(name,age)

{

this.name= name;

this.age= age;

this.setName= function(n)

{

this.name= n;

}

this.getName= function()

{

returnthis.name;

}

this.setAge= function(a)

{

this.age= a;

}

this.getAge= function()

{

returnthis.age;

}

}

varp = new Person("武松",30);

alert(p.name+"***"+p.age);

//需求：我现在有一个学生类，他和这个Person类的结构一模一样，

//怎么办呢？

//重构：重构（Refactoring）就是在不改变软件现有功能的基础上，

//通过调整程序代码改善软件的质量、性能，使其程序的设计模式和架构更趋合理，提高软件的扩展性和维护性。

//通过了解重构和java中的继承，我们就想到了，这里的代码其实也是可以优化的。

functionStudent(){} //什么都没有定义

//在这里产生一个继承关系

Student.prototype= p;

vars = new Student();

s.setName("石松");

s.setAge(29);

alert(s.getName()+"***"+s.getAge());

js的原型应用

<!--

比如说：在使用js数组或者字符串对象的操作中，如果功能不够了，怎么办呢?

自己写呗,但是，自己写的话，我们每次都要把数组作为参数传递，这样感觉很别扭。

大家想一想，如果我们在使用js对象的时候，还传递该类型的对象。

对象.属性 或者 对象.方法()

我想的是对象本身调用方法就可以直接返回最大值，而不用把对象本身作为参数传递。

通过原型就可以实现。

-->

<script type="text/javascript">

//获取数组中的最大值

/*

functiongetMax(arr)

{

//定义参照物

varmax = arr[0];

for(varx=1; x<arr.length; x++)

{

if(arr[x]>max)

{

max= arr[x];

}

}

returnmax;

}

//创建一个数组

vararr = [134,276,35,49,215];

alert(getMax(arr));

*/

//arr.方法()就能够获取到数组中的最大值

Array.prototype.getMax= function()

{

//实现功能

varmax = this[0];

for(varx=1; x<this.length; x++)

{

if(this[x]>max)

{

max= this[x];

}

}

returnmax;

}

//定义一个数组

vararr = [134,276,35,49,215];

//我要调用一个方法就能获取数组中的最大值

//而数组并没有提供这个方法，所以，需要我们自己实现。

//那么我们自己怎么实现呢?通过原型

//this对象：谁调用，this代表谁。

alert(arr.getMax());

</script>

例子2：

<!--

需求：去除字符串两端的空格,把字符串变成字符数组,反转功能。

-->

<script type="text/javascript">

//在js中是没有我要求的这几个方法的，所以，都是要求自己实现的。

//并且，我们又不想把字符串作为参数传递，所以我们使用字符串的原型

//给字符串的原型添加功能,就相当于给字符串添加功能

String.prototype.trim= function()

{

/*

分析：

A：this就代表那个带有空格的字符串对象

B：先从头开始找空格，一直往后找，如果没有空格了，就记录该索引

C：从后面开始找空格，一直往前找，如果没有空格了，就记录该索引

D：使用字符串的截取功能截取字符串

*/

//定义开头索引

varstart = 0;

//定义末尾索引

varend = this.length - 1;

//从头找空格

while(start<=end&& this.charAt(start)==" ")

{

start++;

}

//从后面找空格

while(start<=end&& this.charAt(end)==" ")

{

end--;

}

returnthis.substring(start,end+1);

}

//把字符串变成字符数组

String.prototype.toCharArray= function()

{

/*

A：this还是代表那个调用方法的字符串

B：定义一个字符数组

C：遍历字符串获取到每一个字符

D：把遍历到的每一个字符添加到字符数组中。

E：返回字符数组

*/

//定义字符数组

varchs = new Array(this.length);

//遍历字符串

for(varx=0; x<this.length; x++)

{

chs[x]= this.charAt(x);

}

//返回字符数组

returnchs;

}

//字符串反转功能

String.prototype.myReverse= function()

{

/*

A:可以把字符串变成字符数组,因为我刚才写过这个方法

B:在数组中有反转功能

*/

//把字符串转成数组

vararr = this.toCharArray();

//调用数组中的反转功能

returnarr.reverse();

}

//定义一个字符串对象

//varstr = " hello world ";

//alert("***"+str.trim()+"***");

varstr = "hello,js";

//vararr = str.toCharArray();

//alert(arr.toString());

alert(str.myReverse());

</script>