JavaScript对象
对象---用javascript语言描述现实中具体事物
用javascript语言现实中具体事物数据化以后得到
例如:我们写程序需要一辆汽车,计算机不能直接去使用一个在马路上行驶的汽车,所以我们就需要将马路上行驶的汽车,使用javascript语言把汽车描述出来,这时程序中描述出来的汽车就是一个汽车对象。
具体事物数据化--描述现实中具体事物---1.事物的基本特征
2.事物的基本功能
对象中的元素包括:1.基本特征---属性
2.基本功能---方法【函数】
对象如何创建
1.字面量形式创建对象
--{}
--属性【键值对】
--方法【函数】
对象调用属性:对象名称.属性名称; / 对象名称["属性名称"];
对象调用方法: 对象名称.方法名称([参数]);
eg:
var car={name:"BMW",
color:"red",
forword:function(){},
back:function(){}
};
car.name; //BMW
car["name"]; //BMW
car.forword();
2.函数形式创建对象
---function
1)定义创建对象的函数
格式:
function 函数名称【首字母大写】(){
this.属性名称1="属性值1";
this.属性名称2="属性值2";
this.方法名称1=function(){};
this.方法名称2=function(num){};
this.方法名称3=function(num){return "hello"};
}
例如:
function Car(){
this.name="bmw";
this.color="red";
this.forword=function(){};
this.myback=function(str){
alert("参数str=="+str);
};
}
上面的创建对象的函数类似于字面量形式创建对象
var 对象名称={属性名称1:"属性值1",方法名称1:function(){}}
上面创建对象的函数没有通用性,每一次创建出来的对象都是相同的。
创建对象的函数,可以根据用户的要求创建出不同的对象。
function 函数名称【首字母大写】(参数1,参数2){
this.属性名称1="参数1";
this.属性名称2="参数2;
this.方法名称1=function(){};
this.方法名称2=function(num){};
this.方法名称3=function(num){return "hello"};
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
//函数形式创建对象
//1.定义创建对象的函数
function Car(){
this.name="bmw";
this.color="red";
this.forword=function(){};
this.myback=function(str){
alert("参数str=="+str);
};
}
</script>
</head>
<body>
<input type="button" value="测试函数形式创建的对象" οnclick="testObject();">
</body>
</html>
2)创建对象
var 对象名称=new 函数名称(参数);
例如:
var car1=new Car();
var car2=new Car("奔驰","黑色");
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function Car(name,color){
this.name=name;
this.color=color;
this.forword=function(){};
this.myback=function(str){
alert("参数str=="+str);
};
}
function testObject(){
// var car1=new Car("宝马","红色");
// alert(car1.name);
var car1=new Car("奔驰","黑色");
alert(car1.name+"--"+car1.color);
}
</script>
</head>
<body>
<input type="button" value="测试函数形式创建的对象" οnclick="testObject();">
</body>
</html>
3)基于函数创建的对象,访问属性和方法
对象调用属性:对象名称.属性名称; / 对象名称["属性名称"];
var car1=new Car("奔驰","黑色");
car1.name; // 奔驰
对象调用方法: 对象名称.方法名称([参数]);
car1.myback("zhangsan");
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>使用Object创建对象</title>
<script>
function Car(){
this.name="bmw";
this.color="red";
this.forword=function(){};
this.myback=function(str){
alert("参数str=="+str);
};
}
function testObjsct3(){
var car=new Object();
car.name="bmw";
car.color="红色";
car.forword=function(){alert("forword方法");
};
// alert(car.name);
car.forword();
}
</script>
</head>
<body>
<input type="button" value="使用Object创建对象" οnclick="testObjsct3();">
</body>
</html>
3)使用Object创建对象
---Object
简化创建对象的过程,用Object代替创建对象的函数,每一创建对象的时候new Object();
对象的属性和方法没有给出。
用过new Object()得到的对象,赋值给出对象的属性和方法。
格式:
var 对象名称=new Object();
对象名称.属性名称1=属性值1;
对象名称.方法名称1=function(){};
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>使用Object创建对象</title>
<script>
function Car(){
this.name="bmw";
this.color="red";
this.forword=function(){};
this.myback=function(str){
alert("参数str=="+str);
};
}
function testObjsct3(){
var car=new Object();
car.name="bmw";
car.color="红色";
car.forword=function(){alert("forword方法");
};
// alert(car.name);
car.forword();
}
</script>
</head>
<body>
<input type="button" value="使用Object创建对象" οnclick="testObjsct3();">
</body>
</html>
3.对象的分类
1)自定义对象---在编写程序的时候,自己定义创建的对象。
1.字面量形式创建对象---{}
2.函数形式创建对象----function【1.定义创建对象的函数 2.new】
3.使用Object创建对象----new Object()
2)内置对象-----javascript本身提供给我们使用的一组对象
1.高级对象
【Number(数字)对象 字符串(String)对象 Date(日期)对象 Boolean(布尔)对象
Math(算数)对象 RegExp(正则表达式)对象 Array(数组)对象】
2.DOM对象--【document对象 html元素对应的对象】
3.BOM对象---浏览器对象【window】
javascript中的高级对象
【Number(数字)对象 字符串(String)对象 Date(日期)对象 Boolean(布尔)对象
Math(算数)对象 RegExp(正则表达式)对象 Array(数组)对象】
变量就是对象
1)Number(数字)对象
1.创建Number(数字)对象
1.1变量就是对象
var num1=100;
alert(typeof num1); //number---基本数据类型
1.2 new Number()
var num3=new Number(123);
alert(typeof num3); //object----引用数据类型
基本数据类型number---》引用数据类型object---new
引用数据类型object---》基本数据类型number---- “=”
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>创建Number(数字)对象</title>
<script>
//1.创建Number(数字)对象
/*
//1.1变量就是对象
function testObject(){
var num1=100;
var num2=521;
alert(typeof num1); //number
*/
//1.2new Number()
function testObject(){
var num3=new Number(123);
// alert(typeof num3); //object----引用数据类型
num3=123; //重新赋值
//alert(typeof num3); //number----基本数据类型
alert(num3); //123
}
</script>
</head>
<body>
<input type="button" value="创建Number(数字)对象" οnclick="testObject();">
</body>
</html>
2)调用对象提供的属性和方法
属性:
Number.MAX_VALUE 最大值
alert(Number.MAX_VALUE);//1.7976931348623157e+308
Number.MIN_VALUE 最小值
alert(Number.MIN_VALUE); //5e-324
方法:
1. Number.parseFloat() 将字符串转换成小数,和全局方法 parseFloat() 作用一致。
var res1=Number.parseFloat("12.5");
alert(res1+"--"+typeof res1);
2. Number.parseInt() 将字符串转换成整型数字,和全局方法 parseInt() 作用一致。
var res2=Number.parseInt("120");
alert(res2+"--"+typeof res2);
3. Number.isNaN() 判断传递的参数是否为isNaN()。【非数字=true 数字=false】
var res3=isNaN("hello");//true
var res3=isNaN("120");//false
var res3=isNaN(120);//false
数字类型原型上的一些方法:
toFixed()返回指定小数位数的表示形式。[返回值是字符串类型,会四舍五入]。
var num4=128.56739;
num4=num4.toFixed(3);
alert(num4+"--"+typeof num4);
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>调用对象提供的属性和方法</title>
<script>
// 属性:
function testObject(){
var num1=100;
var num2=3.14;
var num3=new Number(123);
//Number.MAX_VALUE 最大值
//alert(Number.MAX_VALUE); //1.7976931348623157e+308
// Number.MIN_VALUE 最小值
//alert(Number.MIN_VALUE); //5e-324
//方法:
//Number.parseFloat() 将字符串转换成小数,和全局方法 parseFloat() 作用一致
var res1=Number.parseFloat(12.5);
//alert ( res1+"--"+typeof res1);
//Number.parseInt() 将字符串转换成整型数字,和全局方法 parseInt() 作用一致
var res2=Number.parseInt(120); //
//alert ( res2+"--"+typeof res2);
//Number.isNaN() 判断传递的参数是否为isNaN()。【非数字=true 数字=false】
//var res3=isNaN("Hello"); //true
//var res3=isNaN("abc"); //true
//var res3=isNaN("120"); //false
var res3=isNaN(120); //false
//alert ( res3+"--"+typeof res3);
//数字类型原型上的一些方法
//toFixed()返回指定小数位数的表示形式。[返回值是字符串类型,会四舍五入]
/*
var num4=128.5;
num4=num4.toFixed(3);
alert ( num4+"--"+typeof num4);//128.500
*/
var num4=128.56789;
num4=num4.toFixed(2);
alert ( num4+"--"+typeof num4);//128.57
}
</script>
</head>
<body>
<input type="button" value="调用对象提供的属性和方法" οnclick="testObject();">
</body>
</html>
3)特殊之处
1.所有 JavaScript 数字均为 64 位
整数(不使用小数点或指数计数法)最多为 15 位。
小数的最大位数是 17,但是浮点运算并不总是 100% 准确
2.如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数
var y = 0377;
如果前缀为 0 和 "x",则解释为十六进制数
var z = 0xFF;
3.可以使用 toString() 方法 输出16进制、8进制、2进制。
var myNumber=128;
myNumber.toString(16); // 返回 80
myNumber.toString(8); // 返回 200
myNumber.toString(2); // 返回 10000000
4.当数字运算结果超过了JavaScript所能表示的数字上限(溢出),结果为一个特殊的无穷大(infinity)值,在JavaScript中以Infinity表示.同样地,当负数的值超过了JavaScript所能表示的负数范围,结果为负无穷大,在JavaScript中以-Infinity表示。
5.NaN 属性是代表非数字值的特殊值,使用 isNaN() 全局函数来判断一个值是否是 NaN 值