《JavaScrip启示录》笔记——对象、属性、Object()

向右看齐 2022-02-28 01:42 150阅读 0赞

# 一、 对象与属性 #

//复杂对象可以将大多数JavaScript值作为属性，包括Number(),String,Boolean()
    		var num = new Number();
    		num.myFunction = function(){ };
    		num.myArray = [];
    		num.myString = 'string';
    		num.myDate = new Date();
    
    		console.log(num.myFunction,num.myArray,num.myString,num.myDate);
    
    		var obj = { 
    			obj1 : { foo : 'bar'},
    			obj2 : { } ,
    		}
    
    		//Object(),Array(),Function()对象可以包含其他对象
    		var arr = [[[]]];
    
    		var func = function(){ 
    			var myFunc = function(){ 
    				var myFunc2 = function(){ 
    
    				};
    			};
    		};
    
    		//用点表示法获取/设置/更新对象属性
    		//创建对象
    		var person = new Object();
    		//设置属性
    		person.name = 'fltenwall';
    		person.age = 22;
    		person.interest = 'coding';
    		person.lean = function () { return person.interest};
    		//获取属性
    		console.log(
    			person.name,
    			person.age,
    			person.interest,
    			person.lean()
    			);
    		//修改属性
    		person.name = 'cinderella';
    		person.age = 32;
    		person.interest = 'reading';
    		person.lean = function () { return this.interest};
    		//获取修改后的属性
    		console.log(
    			person.name,
    			person.gae,
    			person.interest,
    			person.lean()
    			);
    
    		//中括号设置/获取/更新对象属性
    		console.log("中括号设置/获取/更新对象属性");
    
    		var person2 = new Object();
    
    		person['name'] = 'fltenwall';
    		person['age'] = 20;
    		person['interest'] = 'conding';
    		person['working'] = function () { return this.interest};
    
    		console.log(
    			person['name'],
    			person['age'],
    			person['interest'],
    			person['working']()
    			);
    
    		//中括号的特殊用法
    		console.log("中括号的特殊用法");
    		var testObject = { testCoding:'Coding is fun'};
    
    		var string1 = 'test';
    		var string2 = 'Coding';
    
    		console.log(testObject[string1+string2]);//Coding is fun
    		console.log(testObject.string1+testObject.string2);//Nan
    
    		//属性名不符合规则时
    		var testObject2 = { '123' : 'num','class' : 'cl'};
    		console.log(testObject2['123'],testObject2['class']);//num,cl
    		// console.log(testObject2.123,testObject2.class);//报错
    
    		//删除对象属性
    		console.log("删除对象属性")
    		var obj3 = { code : 'coding'};
    		delete obj3.code;
    		console.log(obj3.code);//undefined
    		console.log('code' in obj3);//false
    
    		var obj4 = { code2 : 'coding'};
    		obj4.code2 = undefined;
    		console.log(obj4.code2);//undefined
    		console.log('code2' in obj4)//true
    
    		//当对象试图访问一个属性，但该对象不包含该属性时，js将针对这个值（属性）搜索原型链。首先查看其创建对象的构造函数，并检验其原型（如Array.prototype）。如果第一个原型对象没有该属性，则继续搜索初始构造函数背后的构造函数链，一直搜索到链的末端，即Object.prototype中的属性，如果仍未找到，则返回一个该属性未定义的错误消息。所有的prototype属性都是对象。这也是JS处理继承以及简单属性查询的过程。
    
    		//hasOwnPrototype方法检查对象属性是否为自有属性（不是从原型链继承）
    		var obj5 = { love : 'coding'};
    		console.log(obj5.hasOwnProperty('love'));//true,property意为“性质
    		console.log(obj5.hasOwnProperty('toString'));//false
    
    		//in操作符检查一个对象是否包含给定属性（包括自有属性以及通过原型链继承属性）
    		console.log('love' in obj5);//true
    		console.log('toString' in obj5);//true
    
    		//for in循环枚举对象的属性（只能遍历可用属性，构造函数属性不会显示）
    		var peppa = { 
    			name : 'peppa',
    			age : 22,
    			location : 'London'
    		}
    		for(var key in peppa){ 
    			console.log(key);
    		}
    		console.log(peppa.propertyIsEnumerable('age'));//true，propertyIsEnumerable()方法检查属性是否是可枚举属性
    
    		var arr2 = ['1','2','3'];
    		len = arr2.length
    		for(var key2 in arr2){ 
    			console.log(key2);
    		}
    		// console.log(len);
    		console.log(arr2.propertyIsEnumerable('length'));//false,length属性是Array构造函数的属性
    
    		//输出window/head对象的所有属性
    		// for(x in window){ 
    		// console.log(x);
    		// }
    
    		//输出window.document对象所包含的所有对象
    		// for(x in window.document){ 
    		// console.log(x);
    		// }
    
    		//运行JS代码的宿主环境（如Web浏览器）提供了head对象（如window对象），语言中原生部分，宿主对象（如window.location）和用户自定义对象一起储存。DOM是用于处理HTML文档的接口。*/
    
    		//使用Underscore.js增强及扩展对象，为所有对象和数组提供了很多方法。

# 二、 Object()对象 #

//确认Object()对象创建的是一个没有预定义属性和方法的空对象。Object()构造函数本身就是对象，构造函数是基于Function构造函数创建的对象。
    		var body = new Object();
    		for(key in body){ 
    			if(body.hasOwnProperty(key)){ 
    				console.log(key);
    			}
    		}
    
    		//将一个除null,undefined,之外的值传入Object()，传入的值将被视为一个对象。
    		console.log(new Object());//{}
    		console.log(new Object(null));//{}
    		console.log(new Object(undefined));//{}
    		console.log(new Object('string'));//String{'string'}
    		console.log(new Object(true));//Boolean{true}
    		console.log(new Object(function(){ }));//f(){}
    		console.log(new Object([]));//[]
    		console.log(new Object(10));//Number(10)
    
    		var body1 = new Object();
    		var body2 = new Object(null);
    		var body3 = new Object(undefined);
    		console.log(typeof body1);//Object
    		console.log(typeof body2);//Object
    		console.log(typeof body3);//Object
    
    		var body4 = new Object('coding');
    		console.log(typeof body4);//Object
    		var body5 = new Object(true);
    		console.log(typeof body5);//Object
    
    		//Object()对象具有的属性（不包括继承的属性和方法）：prototype
    		/*Object()对象实例属性和方法： hasOwnProperty(); isPrototypeOf(); propertyIsEnumerable(); toLocaleString(); toString(); valueOf(); */
    		//原型链以Object().prototype结尾,所有的属性合法方法被所有的JS对象继承
    
    
    		//使用对象字面量创建Object()对象
    		var body6 = { 
    			name : 'fltenwall',
    			age : 23,
    			love : 'coding',
    			doing : function(){ return this.love}//最后一个属性后面不应加逗号
    		}
    		console.log(body6);
    		//用字面量的方式取代下面的方式
    		var body7 = new Object();
    		body7.name = 'fltenwall';
    		body7.age = 22;
    		body7.love = 'coding';
    		body7.doing = function(){ return this.love};
    		console.log(body7);
    
    		//属性名也可以是字符串(属性名是保留关键字/包含空格/特殊字符时可用)
    		var body8 = { 
    			'name' : 'fltenwall',
    			'age' : '22',
    			'code' : 'coding',
    			'love' : function () { this.code}
    		}
    
    		console.log(body8);
    
    
    		//所有对象都继承自Object.prototype
    		Object.prototype.code = 'coding';
    		var body9 = new Object();
    		console.log(body9.code);
    
    		//添加至Object().prototype的任何内容都将出现在for in循环和原型链中
    		var body10 = new Object();
    		for(key in body10){ 
    			console.log(key);//code
    		}