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

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 = ‘[email protected]‘;
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>
时间: 2024-10-24 05:00:24

夺命雷公狗---javascript NO:21 自定义类1的相关文章

夺命雷公狗---javascript NO:23 JavaScript中的this指针

1.自定义类中的this指针 在php中,我们在自定义类时,属性都是预定义在我们的自定义类中,而在JavaScript代码中,所有对象的属性和方法都是动态添加到对象中,那么可不可以让我们的自定义对象自动拥有类的属性和方法? 答:可以,通过this指针 例1:谁实例化自定义类,那么类中的this就指向谁 <!DOCTYPE html> <html> <head> <meta charset=’utf-8′> <title></title>

夺命雷公狗---javascript NO:24 对象之间的赋值操作

1.把对象做为参数进行传递 例1:函数形参值的改变不会影响实参,但是对象除外 1)普通传值 <!DOCTYPE html> <html> <head> <meta charset=’utf-8′> <title></title> </head> <body> <script> function display(name){ name = ‘lisi'; } var name = ‘zhangsan'

夺命雷公狗---javascript NO:28 原型链

1.原型对象 在JavaScript中,每个构造器在加载后都会自动生成一个对象,我们把这个对象就称之为原型对象. 2.构造器与原型对象的关系 Person构造器与Person原型对象在内存中表现为相互独立,互不影响.但是在Person构造器中存在一个prototype属性指向Person原型对象,同时在Person原型对象中也存在一个属性指向Person构造器. 3.原型对象的作用 当我们在Person构造器的实例对象中引用一个不存在的属性或方法,系统会自动到Person构造器的原型对象中去寻找

夺命雷公狗---javascript NO:30 闭包

1.什么是闭包 所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 例1:运行一下代码,得出结论:在全局作用域没有办法直接引用局部变量 <!DOCTYPE html> <html> <head> <meta charset=’utf-8′> <title></title> </head> <body> <script> funct

夺命雷公狗---javascript NO:31 私有属性

1.什么是私有属性 在JavaScript代码中,是没有public/protected/private等定义属性的关键词,但是我们可以通过模拟的方式来实现这个过程. 在JavaScript只有两种属性: 一种共有属性 一种私有属性 2.定义私有属性 在构造器内部,通过this定义的属性就是公有属性 在构造器内部,通过var定义的属性就是私有属性 <!DOCTYPE html> <html> <head> <meta charset=’utf-8′> <

夺命雷公狗---Smarty NO:21 分页

在smarty里面写一个分页 demo6.php代码示例: <?php header(“Content-Type:text/html;charset=utf-8″); require “smarty/Smarty.class.php”; $smarty = new Smarty(); //连接数据库 mysql_connect(“localhost”,’root’,”); mysql_query(‘use xsphp’); mysql_query(‘set names utf8′); //读取所

夺命雷公狗---javascript NO:16 默认行为1

1.什么是默认行为 在我们的HTML标签中,很多标签拥有自己的默认行为. 如: submit提交按钮:其会自动提交表单数据到处理页面 a标签:其会自动跳转到指定页面 有些情况下,我们并不需要这种默认行为. 如: 当我们未填写表单数据时,系统不应该直接提交表单数据到处理页面. 当我们单击删除链接时,如果用户没有确认是不应该直接跳转删除的. 2.组织默认行为 IE模型浏览器 window.event.returnValue = false; W3C模型浏览器 dom对象.事件 = function(

夺命雷公狗---javascript NO:17 默认行为2

解决兼容性问题 ① 在public.js中创建prevent函数 ② 判断浏览器类型 ③ 编写一下程序代码 //解决阻止默认行为兼容性问题 function prevent(event){ if(window.event){ //IE模型浏览器 window.event.returnValue = false; }else{ //w3c event.preventDefault(); } } ④ 在html页面测试prevent方法 <!DOCTYPE html> <html> &

夺命雷公狗---javascript NO:15 事件冒泡3

解决事件冒泡兼容性问题 ① 在public.js函数库中创建stopBubble函数 ② 判断浏览器类型 //冒泡兼容性问题 function stopBubble(event){ if(window.event){ //IE window.event.cancelBubble = true; }else{ event.stopPropagation(); } } ③ 在html页面测试stopBubble函数 <!DOCTYPE html> <html> <head>