JavaScript对象object(引用数据类型)

落日映苍穹つ 2023-10-06 17:11 37阅读 0赞

### 对象的使用 ###

如何访问对象内部数据?
    	* .属性名:编码简单, 有时不能用，
    	* ['属性名']:编码麻烦，能通用
    <script type="text/javascript">
        var a = {
        
            age: 18,
            name: "wang",
            setName: function (name) {
        
                this.name = name;
            }
        };
        a.setName("wei");
        console.log(a.name);//wei
        a['setName']("wang");
        console.log(a.name);//wang
    </script>
    
    
    <script>
        var p = {
        };
        //1.给p对象添加一个属性: content type: text/json
        // p.content-type = 'text/json' //不能用
        p['content-type'] = 'text/json';
        console.log(p['content-type']);//'text/json'
        //2.属性名不确定
        var propName = 'myAge';
        var value = 18;
        // p.propName = value //不能用
        p[propName] = value;
        console.log(p[propName]);//18
    </script>

### 对象分类 ###

1.内建对象
    -由ES标准中定义的对象，在任何的ES的实现中都可以使用
    	-比如: Math String Number Boolean Function object. .
    2.宿主对象
    -由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
    	-比如BOM DOM
    3.自定义对象
    	程序员自己定义
    
    创建对象的两种方法
    	var obj =new Object();//使用构造函数创建对象
    	或var obj={}//使用字面量方法创建对象
    向对象中添加属性
    	obj.name="王二毛";
    	obj.sex="男";
    	obj.age=18;
    	或
    	var obj={
    		name:"王二毛"，
    		sex:"男"，
    		age:18，
    	}
    使用对象
    	console.log(obj.name);//王二毛
    	或
    	console.log(obj["name"]);//王二毛
    修改
    	obj.name="王三毛";
    删除
    	delete obj.name；
    
    /*
    in运算符
    	-通过该运算符可以检查一个对象中是否含有指定的属性本
    	如果有则返回true,没有则返回false
    -语法:“属性名”in对象
    	//检查obj中是否含有test2属性
    	console.log("test2" in obj);

### 引用数据类型 ###

/*
    			 * 基本数据类型
    			 * 	String Number Boolean Null Undefined
    			 * 
    			 * 引用数据类型
    			 * 	Object
    			 * 
    			 * JS中的变量都是保存到栈内存中的，
    			 * 		基本数据类型的值直接在栈内存中存储，
    			 * 		值与值之间是独立存在，修改一个变量不会影响其他的变量
    			 * 
    			 * 		对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，
    			 * 		而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，
    			 * 		当一个通过一个变量修改属性时，另一个也会受到影响
    			 */

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 1]  
当比较两个基本数据类型的值时，就是比较值。  
而比较两个引用数据类型时，它是比较的对象的内存地址，  
如果两个对象是一摸一样的，但是地址不同，它也会返回false  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 2]

### 枚举对象中的属性 ###

obj{
    	name:"王二毛",
    	sex:"男",
    	age:18
    }
    语法:
    for(var 变量 in 对象){
    }
    for. . . in语句对象中有几个属性，循环体就会执行几次
    每次执行时，会将对象中的一个属性的名字赋值给变量
    for(var n in obj){
    	console.log(n);//只输出属性名
    	console.log(obj["n"]);//只输出属性值
    	//结合两者一起使用就可以同时输出属性名和对应的属性值
    }

### 创建对象的四种模式 ###

### 1、使用工厂方法创建对象 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			function createfun(Name,Age,hello){
         
    				// var obj=new Object();
    				// obj.name=Name;
    				// obj.age=Age;
    				var obj={
         
    					name:Name,
    					age:Age,
    					fun:function(){
         
    						alert(hello);
    					}
    				}
    				return obj;
    			}
    			var getobj1= createfun("泰山",18,"我是隔壁的泰山！");
    			var getobj2= createfun("孙悟空",1000,"俺老孙来也！");
    			console.log(getobj1);
    			console.log(getobj2);
    			getobj1.fun();
    		</script>
    	</head> 
    	<body>
    	</body>
    </html>

### 2、Object构造函数模式 ###

var p = new Object( )
    	p.name ='Tom'
    	p.age = 12
    	p.setName = function (name) {
        
    		this.name = name
    	}
    }

### 3、字面量模式 ###

var p = {
        
    	name:' T om，
    	age:12 ,
    	setName: function (name) {
        
    		this.name = name
    	}
    }

### 4、自定义构造函数 ###

方式四:自定义构造函数模式
    	*套路:自定义构造函数，通过new创建对象
    	*适用场景:需要创建多个类型确定的对象
    	*问题:每个对象都有相同的数据，浪费内存
    //定义类型
    function Person(name, age) {
        
    	this.name = name
    	this.age = age
    	this.setName = function (name) {
        
    		this.name = name
    	}
    var p1 = new Person( 'Tom',12)
    p1.setName( 'Jack')
    console.1og(p1.name, p1.age)
    
    function Student (name, price) {
        
    	this. name = name
    	this.price = price
    }
    var s = new Student( 'Bob',13000 )
    console.1og(s instanceof Student)

## 原型对象 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			/*
    			将函数定义在全局作用域；污染全局作用域的命名规则
    			*/
    
    			/*
    		   原型prototype
    		   
    		   我们所创建的每一个函数， 解析器都会向函数中添加一个属性prototype
    				这个属性对应着一个对象，这个对象就是我们所谓的原型对象
    			如果函数作为普通函数调用prototype没有任何作用
    			
    			当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，
    			我们可以通过__proto__ 来访问该属性
    			
    			原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，
    			我们可以将对象中共有的内容，统一设置到原型对象中
    
    当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，
    如果没有则会去原型对象中寻找，如果找到则直接使用
    
    以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，
    这样不用分别为每一个对象添加， 也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了
    
    		   */
    			function Person(Name, Age) {
         
    				this.name = Name;
    				this.age = Age;
    			}
    			//向原型中添加属性a
    			Person.prototype.a = 789;
    			var test = new Person("王二毛", 18);
    			var test2 = new Person();
    			test.a = "我是test中的a"
    			//向原型中添加sayName方法
    			Person.prototype.sayName = function() {
         
    				alert("He11o大家好，我是: " + this.name);
    			};
    			test.sayName();
    			console.log(Person.prototype);
    			console.log(test.__proto__ == Person.prototype);
    			console.log(test.a);
    			console.log(test2.a);
    		</script>
    	</head>
    	<body>
    	</body>
    </html>
    
    //使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true
    //console.1og("name" in mc);//true
    //可以使用对象的hasOwnProperty( )来检查对象自身中是否含有该属性，使用该方法只有当对象自身中含有属性时，才会返回true
    console.1og(mc.hasOwnProperty("age"));//
    
    
    原型对象也是对象，所以它也有原型，
    当我们使用一个对象的属性或方法时，会现在自身中寻找，
    自身中如果有，则直接使用，
    如果没有则去原型对象中寻找，如果原型对象中有，则使用，
    如果没有则去原型的原型中寻找,直到找到Object对象的原型，
    Object对象的原型没有原型，如果在Object中依然没有找到，则返回undefined

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][20210326130331590.png]

## toString ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 4]

## 垃圾回收 ##

赋值为null

使用对象中的属性的两种方式  
obj\[‘属性名’\]方式  
obj.'属性名’方式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210325224737445.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210325224957409.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2021051109314417.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210326125224900.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70
[20210326130331590.png]: https://img-blog.csdnimg.cn/20210326130331590.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2021032613072451.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210611113858719.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70