您的位置：首页 > Web前端 > JavaScript

夺命雷公狗---javascript NO:21 自定义类1

2015-12-09 10:04 549 查看

1、快速入门

例1：通过原生js与面向对象js定义一个人的信息

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
</head>
<body>
<script>
//通过js代码定义一个人的信息
var name = ‘lisi';
var age = ’30′;
var marry = false;
alert(name+’-‘+age+’-‘+marry);
//通过面向对象定义一个人的信息
function Person(){}
//实例化Person类
var p1 = new Person();
//为对象p1赋值name\age\marry属性
p1.name = ‘zhangfei';
p1.age = ’30′;
p1.marry = false;
alert(p1.name+’-‘+p1.age+’-‘+marry);
</script>
</body>
</html>

2、自定义类的创建

在JavaScript代码中，是没有class关键词来定义类，只有function，当我们通过function关键词定义一个函数时，如Person函数，那么系统会认为该函数是同名类（Person类）的构造函数，那么这就是我们在JavaScript代码中定义类的基本语法。

class Person {

function Person() {} //同名Person类的构造函数

}

3、自定义类执行流程

1）开辟内存空间

2）执行构造函数（构造器）

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
</head>
<body>
<script>
//定义一个自定义类
function Person(){
alert(‘hello’);
}
var p1 = new Person();
</script>
</body>
</html>

通过以上代码验证可知，当我们执行第14行代码时，系统会自动弹出hello，所以我们可以证明，Person函数是同名Person类下的构造函数（构造器）

4、关于属性的使用

问题：我们为什么要使用类创建一个对象？

答：我们创建对象的目的是为了保存更多的数据，在JavaScript代码可以通过属性来保存数据。

定义属性的基本语法：

对象.属性 = 属性值

使用属性的基本语法：

对象.属性

或

对象[‘属性’]

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
</head>
<body>
<script>
//1.定义类
function Person(){}
//2.实例化Person类，创建一个对象
var p1 = new Person();
//3.为p1绑定name.email.address三个属性
p1.name = ‘lisi';
p1.email = ‘123@qq.com';
p1[‘address’] = ‘广东省广州市';
//4.引用name.email.address等属性
alert(p1.name);
alert(p1.email);
alert(p1.address);
</script>
</body>
</html>

问题：我们知道在JavaScript没有class关键词，只有function，当我们通过function定义一个函数时，其是以函数的方式进行引用的，还是以面向对象方式进行引用的呢？

答：其实在JavaScript中的，function都是以面向对象形式进行调用的，因为在全局作用域定义的所有属性和方法都是以属性的形式添加到window对象中。

在JavaScript中，一切都是对象。

var str=’hello’; //String

var num=10; //Number

var marry=true; //Boolean

5、属性类型

数字

字符串

布尔值

对象 (document)

对象名.属性

对象名[‘属性’]

6、三大关键词

typeof（操作符，其不是一个函数）：判断当前变量的数据类型

instanceof ：判断当前对象是否是某个类的实例

constructor ：返回当前对象的构造函数或构造器（返回原型对象所指向的构造器）

使用方法：

alert( typeof p );

alert( p instanceof person );

alert( p.constructor );

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
</head>
<body>
<script>
//1.定义一个自定义类
function Person(){
//同名Person类的构造函数
}
//创建一个对象
var p1 = new Person();
//判断p1对象的数据类型
alert(typeof p1);
//判断p1对象是否是Person类的实例
alert(p1 instanceof Person);
//返回p1对象的构造函数
alert(p1.constructor);
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航