JavaScript中的对象

2023-09-05 阅读 89 评论 0

摘要：什么是对象现实生活中：万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征。举例：一部车，一个手机车是一类事物，门口停的那辆车才是对象特征：红色、四个轮子行为：驾驶、刹车 JavaScript中的对

什么是对象

现实生活中：万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征。
举例：一部车，一个手机
车是一类事物，门口停的那辆车才是对象
特征：红色、四个轮子
行为：驾驶、刹车

JavaScript中的对象

JavaScript中的对象其实就是生活中对象的一个抽象
JavaScript的对象是无序属性的集合。
其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript中的对象想象成键值对，其中值可以是数据和函数。
对象的行为和特征
特征---属性事物的特征在对象中用属性来表示。

行为---方法事物的行为在对象中用方法来表示。

如何获取该变量（对象）是不是属于什么类型的？

语法：

变量 instanceof 类型的名字 ----->布尔类型,true就是这种类型,false不是这种类型

在当前的对象的方法中,可以使用this关键字代表当前的对象

创建对象三种方式:

1.调用系统的构造函数创建对象

var 变量名= new Object(); Object 是系统的构造函数  Array

2.自定义构造函数创建对象【我要自己定义一个构造函数（自定义构造函数）,然后用这个函数去创建对象】

函数和构造函数的区别；名字是不是大写(首字母是大写  【函数的目的是调用，而构造函数的目的是为了创建对象】

function Person{};  //自定义构造函数

3.字面量的方式创建对象

var obj = {}; //空对象

1.调用系统的构造函数创建对象（如何一次性创建多个对象?把创建对象的代码封装在一个函数中）

//工厂模式创建对象function createObject(name,age) {var obj = new Object();//创建对象//添加属性obj.name = name;obj.age = age;//添加方法obj.sayHi = function () {console.log("阿涅哈斯诶呦,我叫:" + this.name + "我今年:" + this.age);};return obj;}//创建人的对象var per1 = createObject("小芳",20);per1.sayHi();//创建一个人的对象var per2 = createObject("小红",30);per2.sayHi();

2.自定义构造函数创建对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><script>//自定义构造函数创建对象,我要自己定义一个构造函数,自定义构造函数,创建对象//函数和构造函数的区别；名字是不是大写(首字母是大写)//自定义构造函数function Person(name,age) {this.name=name;this.age=age;this.sayHi=function () {console.log("我叫:"+this.name+",年龄是:"+this.age);};}//自定义构造函数创建对象:先自定义一个构造函数,创建对象var obj=new Person("小明",10); //创建对象console.log(obj.name);console.log(obj.age);obj.sayHi();var obj2=new Person("小红",20);console.log(obj2.name);console.log(obj2.age);obj2.sayHi();console.log(obj instanceof Person);console.log(obj2 instanceof  Person);//自定义狗的构造函数,创建对象function Dog(name,age,sex) {this.name=name;this.age=age;this.sex=sex;}var dog=new Dog("大黄",20,"男");console.log(dog instanceof Person);//falseconsole.log(dog instanceof Dog);</script>
</head>
<body></body>
</html>

3.字面量的方式创建对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script>var obj={};obj.name="小白";obj.age=10;obj.sayHi=function () {console.log("我是:"+this.name);};obj.sayHi();//优化后的写法：var obj2={name:"小明",age:20,sayHi:function () {console.log("我是:"+this.name);},eat:function () {console.log("吃了");}};obj2.sayHi();obj2.eat();</script>
</head>
<body></body>
</html>

创建对象的内存分配图解

设置和获取属性的另一种写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><script>function Person(name,age) {this.name=name;this.age=age;this.play=function () {console.log("喜欢玩游戏");};}var obj=new Person("卡卡西",20);//obj.name="佐助";obj["name"]="佐助";console.log(obj["name"]);//    obj.play();obj["play"]();// console.log(obj.name);
//    console.log(obj.age);
//    obj.play();</script>
</head>
<body></body>
</html>

JSON数据格式

对象:有属性和方法,特指的某个事物（遍历对象,是不能通过for循环遍历,因为对象里的内容是无序的）
对象:一组无序属性的集合的键值对,属性的值可以是任意的类型

JSON格式的数据:一般都是成对的,是键值对,json也是一个对象,数据都是成对的,一般json格式的数据无论是键还是值都是用双引号括起来的

遍历对象的属性（遍历对象,是不能通过for循环遍历,因为对象里的内容是无序的）

通过for..in语法可以遍历一个对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><script>//对象:有属性和方法,特指的某个事物//对象:一组无序属性的集合的键值对,属性的值可以是任意的类型//    function Dog(name) {//      this.name=name;//    }//    function Person(name,age) {//      this.age=age;//      this.name=name;//      this.sex=true;//      this.dog={};//      this.play=function () {//        console.log("喜欢玩游戏");//      };//    }////    var sex=false;//男//    console.log(sex?"男":"女");//JSON格式的数据:一般都是成对的,是键值对,//json也是一个对象,数据都是成对的,一般json格式的数据无论是键还是值都是用双引号括起来的var json = {"name": "小明","age": "10","sex": "男"};//遍历对象,是不能通过for循环遍历,无序//key是一个变量,这个变量中存储的是该对象的所有的属性的名字for (var key in json) {console.log(key + "===========" + json[key]);  //这里不用console.log(key + "===========" + json.key);// 因为json这个对象里没有key这个属性}//    var key="name";//    console.log(json[key]);//可以通过for-in循环////    for(var key in json){//      //console.log(key);//json对象中的属性的名字//      console.log(json[key]);//    }//对象中确实有这个属性 对象.属性名字  或者 对象[属性名字]</script>
</head>
<body></body>
</html>

简单类型和复杂类型的区别

原始数据类型: number,string,boolean,undefined, null,object

基本类型(简单类型),值类型: number,string,boolean

复杂类型(引用类型):object
空类型:undefined,null

值类型的值在哪一块空间中存储? 栈中存储
引用类型的值在哪一块空间中存储?对象在堆上存储,地址在栈上存储

var num=10;//值类型,值在栈上
var obj={};//复杂类型,对象在堆,地址(引用)在栈值类型之间传递,传递的是值
引用类型之间传递,传递的是地址(引用)值类型作为函数的参数,传递的是值
引用类型作为函数的参数,传递的是地址

堆和栈

堆栈空间分配区别：1、栈（操作系统）：由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；2、堆（操作系统）： 存储复杂类型(对象)，一般由程序员分配释放， 若程序员不释放，由垃圾回收机制回收，分配方式倒是类似于链表。

注意：JavaScript中没有堆和栈的概念，此处我们用堆和栈来讲解，目的方便理解和方便以后的学习。

var obj={name:"小明"};function f2(obj2) {obj2.name="小红";}console.log(obj.name);//小明f2(obj);console.log(obj.name);//小红

基本类型在内存中的存储

复杂类型在内存中的存储

基本类型作为函数的参数

复杂类型作为函数的参数

// 下面代码输出的结果
function Person(name,age,salary) {this.name = name;this.age = age;this.salary = salary;
}
function f1(person) {person.name = "ls";person = new Person("aa",18,10);
}var p = new Person("zs",18,1000);
console.log(p.name);//zs
f1(p);
console.log(p.name); //ls

内置对象

* js学习中三种对象:
* 1.内置对象----js系统自带的对象 Math Date String Array Object
* 2.自定义对象---自己定义的构造函数创建的对象
* 3.浏览器对象---BOM的时候讲

Math对象

Math对象不是构造函数，它具有数学常数和函数的属性和方法，都是以静态成员的方式提供跟数学相关的运算来找Math中的成员（求绝对值，取整）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><script>//MDN----在线的帮助文档//实例对象:通过构造函数创建出来,实例化的对象//静态对象:不需要创建,直接就是一个对象,方法(静态方法)直接通过这个对象名字调用,//实例方法必须通过实例对象调用//静态方法必须通过大写的对象调用//Math.PI----π---//Math.E----常数的底数//Math.abs(值)-----绝对值//Math.ceil(值)----向上取整//Math.floor(值)---向下取整//    console.log(Math.PI);
//    console.log(Math.E);//    console.log( Math.abs('-1'));//1
//
//    console.log( Math.abs(-2));//2
//    console.log(Math.abs(null));//---------0  重点
//    console.log(Math.abs("string"));//NaN//    console.log(Math.ceil(12.3));
//    console.log(Math.ceil(12.9));
//    console.log(Math.ceil(12.09));
//    console.log(Math.ceil(12.03));
//    console.log(Math.ceil(12.92));//    console.log(Math.floor(12.3));
//    console.log(Math.floor(12.9));
//    console.log(Math.floor(12.09));
//    console.log(Math.floor(12.03));
//    console.log(Math.floor(12.92));//    console.log(Math.fround(2));
//    console.log(Math.fround(2.1));
//    console.log(Math.fround(2.9));//找一坨数字中的最大值//    console.log(Math.max(10,1,9,100,200,45,78));
//    console.log(Math.min(10,1,9,100,200,45,78));
//    console.log(Math.pow(2,4));
//    console.log(Math.sqrt(16));//0-4  没有5console.log(parseInt(Math.random()*5)+1); // 1-5console.log(parseInt(Math.random()*100)+1); // 1-100</script>
</head>
<body></body>
</html>

注：