包装对象、对象常用操作、继承

一、 包装对象
             *     在js内部，当我们去调用字符串、数字、布尔值这些基本数据类型的属性或者方法的时候，js会在内部先把这些基本数据类型转成一个对应的对象类型（包装对象），然后再去调用包装对象身上的这些属性或者方法
             * 
             * 包装对象有
             *     String
             *     Number
             *     Boolear
             * 
             * 注意：
             *         1、null与undefined没有对应的包装对象
             *         2、基本数据类型只能使用对应的包装对象身上的属性或者方法，不能添加
             *             因为使用后，包装对象就消失了，所以只能用，不能添加
  1. 			var str='kaivon';
  2. 			console.log(str.charAt(0));		//k
  3. 			console.log(str.length);			//6
  4. 			console.log(str.substring(1));	//aivon
  5. 			
  6. 			//内部执行的过程
  7. 			/*var str=new String('kaivon');
  8. 			console.log(str.length);*/
  9. 			
  10. 			
  11. 			var num=12.456;
  12. 			console.log(num.toFixed(2));		//12.46		把数字转成字符串，并用四舍五入的方法截取小数点后面的位数
  13. 			//内部执行的过程
  14. 			/*var num=new Number(12.456);
  15. 			console.log(num.toFixed(2));*/
  16. 			
  17. 			
  18. 			//基本数据类型只能用对应包装对象身上的方法或者属性，不能添加
  19. 			var str1='kaivon1';
  20. 			str1.a=12;
  21. 			console.log(str1.a);			//undefined
二、hasOwnProperty
             *     作用
             *         判断一个属性是不是自己对象身上的(主语是对象，不会找到原型更不会找到Object)，（主语是原型，就只在原型身上找）
             *     语法
             *         对象.hasOwnProperty(属性)
             *     参数
             *         要检测的属性
             *     返回值
             *         true            自身属性
             *         false        非自身属性
             *     注意
             *         1、这个方法是Object身上的方法
             *         2、不会顺着原型链往外面去查找属性，只查找自身
  1. 			function Person(name){
  2. 				this.name=name;
  3. 			}
  4. 			Person.prototype.country='china';
  5. 			
  6. 			var p1=new Person('kaivon');
  7. 			console.log(p1.name);		//kaivon
  8. 			console.log(p1.country);		//china
  9. 			
  10. 			
  11. 			console.log(p1.hasOwnProperty('name'));			//true
  12. 			console.log(p1.hasOwnProperty('country'));		//false      因为这个属性在原型身上
三、constructor
             *     概念
             *         每个对象身上都会有这个属性，默认指向该对象对应的构造函数
             *         这个属性不是放在对象身上，放在对应的原型对象身上
             *     作用
             *         查看对象的构造函数(构造函数的函数名)
             *     语法
             *         对象.constructor
             *     返回值
             *         对象的构造函数
             *     注意：
             *         这个属性是可以被修改的
  1. 			function Coder(name){
  2. 				this.name=name;
  3. 			}
  4. 			/**Coder.prototype.age=18;
  5. 			Coder.prototype.sex='男';*/   //这种写法没有问题
  6. 			
  7. 			Coder.prototype={
  8. 				constructor:Coder,   //这种写成对象的写法，会不经意间把constructor改成别的，所以也就自己把constructor设定为对应的构造函数的名字
  9. 				age:18,
  10. 				sex:'男'
  11. 			};
  12. 
              console.log(c1.constructor==Coder);  //ture
 
四、for   in
 //通过原型的方式添加的属性用for in也可以遍历出来
 //constructor属性是不能被for in遍历出来的
  1. 			for(var attr in obj){
  2. 				console.log(attr,obj[attr]);
  3. 			}
 //如果不想找到原型添加的属性---通过hasOwnProperty判断
  1. 			//如果只想遍历自己身上的属性
  2. 			for(var attr in arr){
  3. 				if(arr.hasOwnProperty(attr)){
  4. 					console.log(attr,arr[attr]);		
  5. 				}
  6. 			}
五、instanceof
             *     作用
             *         二元运算符，和==，>，<是同一类东西,用来查找对象与构造函数在原型链上有没有关系  
             *     语法
             *         对象 instanceof 构造函数
             *     返回值
             *         true            有关系
             *         false        没关系
             * 
             *     可以用来做类型判断
  1. 			function Person(name){
  2. 				this.name=name;
  3. 			}
  4. 			var p1=new Person('kaivon');
  5. 			
  6. 			console.log(p1 instanceof Person);		//true
  7. 			console.log(p1 instanceof Array);		//false
  8. 			console.log(p1 instanceof Object);		//true
六、toString
             *     作用
             *         把对象类型转成字符串
             *     注意
             *         系统对象下的这个方法都是它对应原型对象身上的方法，自己写的对象下的这个方法是属于Object原型身上的方法
  1. 			//用toString做类型判断
  2. 			var num=0;
  3. 			var str='kaivon';
  4. 			var b=true;
  5. 			var n=null;
  6. 			var u=undefined;
  7. 			var arr1=[];
  8. 			var obj1={};
  9. 			var fn=function(){};
  10. 			var d=new Date();
  11. 			var re=new RegExp();
  12. 			
  13. 			console.log(Object.prototype.toString.call(num));		//[object Number]
  14. 			console.log(Object.prototype.toString.call(str));		//[object String]
  15. 			console.log(Object.prototype.toString.call(b));			//[object Boolean]
  16. 			console.log(Object.prototype.toString.call(n));			//[object Null]
  17. 			console.log(Object.prototype.toString.call(u));			//[object Undefined]
  18. 			console.log(Object.prototype.toString.call(arr1));		//[object Array]
  19. 			console.log(Object.prototype.toString.call(obj1));		//[object Object]
  20. 			console.log(Object.prototype.toString.call(fn));			//[object Function]
  21. 			console.log(Object.prototype.toString.call(d));			//[object Date]
  22. 			console.log(Object.prototype.toString.call(re));			//[object RegExp]
  23.             在对象原型下将对象类型转成字符串，call修正this的指向
七、call
             *     作用
             *         调用函数并且改变this的指向
             *     语法
             *         函数名.call(thisArg,arg1,arg2...)
             *     参数
             *         thisArg            函数中this指向的值
             *         arg1,arg2...        从call里的第二个参数开始，都是真正函数里的参数
             *     返回值
             *         undefined
             * 
             *     注意：thisArg的值为null或者undefined的时候，this是指向window
  1. 			function fn(){
  2. 				console.log(this);
  3. 			}
  4. 			fn();			//window
  5. 			
  6. 			fn.call(1);				//this指向数字
  7. 			fn.call('kaivon');		//this指向字符串
  8. 			fn.call('true');			//this指向布尔值
  9. 			fn.call([1,2,3]);		//this指向数组
  10. 			fn.call({});				//this指向对象
  11. 			fn.call(null);			//this指向window
  12. 			fn.call(undefined);		//this指向window
  1. 			function fn1(name,age){
  2. 				console.log(this,name,age);     
  3. 			}
  4. 			fn1.call(1,'Sigo',18); 		//Number  'Sigo' 18
  5. 			fn1('Sigo',18);				//window  'Sigo' 18
            apply的作用和call的作用一样只是语法不一样
              *         函数名.call(thisArg,[arg1,arg2...])
八、赋值与赋引用
    基本数据类型
  1. 			var str1='kaivon';
  2. 			var str2='kaivon';
  3. 			console.log(str1==str2);			//true
  4. 			
  5. 			//基本数据类型的赋值，就是把值复制了一下
  6. 			var n1=2;
  7. 			var n2=n1+5;
  8. 			console.log(n1,n2);		//2 7
  9. 			
  10. 			//基本数据类型的比较，比较的是值相等就相等
  11. 			var n3=10;
  12. 			var n4=10;
  13. 			console.log(n3==n4);		//true
    复杂数据类型
  1. 			var obj1={a:10,b:20};
  2. 			var obj2={a:10,b:20};
  3. 			console.log(obj1==obj2);			//false 	数值是相同，但是内存的引用地址不一样
  4. 			
  5. 			//复杂数据类型的比较，比较的不光是值，并且还要比较引用地址，如果两个都相等，那他们就相等
  6. 			var obj3={a:10,b:20};
  7. 			var obj4=obj3;
  8. 			console.log(obj3==obj4);		//true
  9. 			
  10. 			//复杂数据类型的赋值，它不光把值复制了一下，并且还复制了一下在内存中的引用地址
  11. 			var arr1=[1,2,3];
  12. 			var arr2=arr1;
  13. 			arr2.push(4);			//arr2与arr1的引用地址是相同的，所以无论修改哪个，两个都会变
  14. 			console.log(arr2);		//[1, 2, 3, 4]
  15. 			console.log(arr1);		//[1, 2, 3, 4]
  16. 			
  17. 			
  18. 			var arr3=[4,5,6];
  19. 			var arr4=arr3;
  20. 			arr4=[7,8,9];			//arr4又赋值了，所以就又开了一块内存，引用地址就不一样了
  21. 			console.log(arr4);		//[7, 8, 9]
  22. 			console.log(arr3);		//[4, 5, 6]
九、浅拷贝与深拷贝
  1. 			//拷贝就是将一个对象的值复制到另一个对象那里去，但是应用地址不一样， 所以两个对象之间就不会有关系了。
  2. 			  //这是浅拷贝，既考虑不那么周到，如果对象的值也有对象就不适用
  3. 			window.onload=function(){
  4. 				var p1={a:1,b:20};
  5. 				
  6. 				function a(obj){
  7. 					var newObject={};
  8. 					for( attr in obj){
  9. 						newObject[attr]=obj[attr];
  10. 					}
  11. 					return newObject;
  12. 				}
  13. 				var p2=a(p1);
  14. 				p2.a=10;
  15. 				console.log(p2);     //a: 10    b:20
  16. 				console.log(p1);	//a:1       b:20
  17. 			}
  1. 			//深拷贝
  2. 				var p3={
  3. 					a:1,
  4. 					b:[20,10,30],
  5. 					c:{
  6. 						d:40
  7. 					}
  8. 					
  9. 				}
  10. 				function b(obj){
  11. 					var newObject={};
  12. 					if(typeof obj !='object'){
  13. 						return obj;
  14. 					}
  15. 					//如果要复制的对象里有个属性的值是数组，那复制的结果就必需还是数组
  16. 					if(obj instanceof Array){
  17. 						//obj.constructor==Array这个判断条件也可以
  18. 						newObject=[];
  19. 					}else{
  20. 						newObject={};
  21. 					}
  22. 						
  23. 					for( attr in obj){
  24. 						
  25. 						newObject[attr]=b(obj[attr])
  26. 					}
  27. 					return newObject;
  28. 				}
  29. 				
  30. 				var p4=b(p3);
  31. 				console.log(p4);
十、继承
              *         让一个对象拥有另一个对象的属性或者方法，并且自己添加的属性或者方法都不会影响到原来的对象
             * 属性继承
             *         通过call的方法调用构造函数继承属性
             * 方法继承
             *         通过for in的方法继承原型身上的方法
             * 
             * 注意：
             *         1、继承其它对象的属性的时候，一定要用call去修正一下this的指向
             *         2、继承其它对象的方法的时候，不能直接赋值，要用for in的方法去赋值，不然会出现对象引用的关系（引用地址 ）
继承属性
  1. 			function Person(name,age){
  2. 				this.name=name;
  3. 				this.age=age;
  4. 			}
  5. 			
  6. 			//创建一个对象
  7. 			function Coder(name,age,job){
  8. 				/*this.name=name;
  9. 				this.age=age;*/
  10. 				
  11. 				//Person(name,age);			直接调用函数（普通函数调用方式）的话，this指向了window，就会有问题 ，
  12. 				Person.call(this,name,age);
  13. 				
  14. 				this.job=job;
  15. 			}
方法继承
  1. 			function Person(name){
  2. 				this.name=name;
  3. 			}
  4. 			
  5. 			Person.prototype.say=function(){
  6. 				console.log('我叫'+this.name);
  7. 			}
  8. 			var p1=new Person('Sigo');
  9. 			
  10. 			//创建一个对象
  11. 			function Coder(name,job){
  12. 				Person.call(this,name);   //属性继承
  13. 				this.job=job;
  14. 			}
  15. 			
  16. 			for(var attr in Person.prototype){
  17. 				//Coder.prototype[attr]=Person.prototype[attr];
  18. 				
  19. 				//如果只想继承构造函数原型身上自己的方法，就需要做以下的判断
  20. 				if(Person.prototype.hasOwnProperty(attr)){
  21. 					Coder.prototype[attr]=Person.prototype[attr];  //将Person原型say的方法继承给Coder了
  22. 				}
  23. 			}
  24. 			
  25. 			Coder.prototype.coding=function(){     
  26. 				console.log('我的工作是'+this.job+'，我正在加班');
  27. 			}
  28. 			
  29. 			var c1=new Coder('Sigo','前端');
  30. 			
  31. 			c1.say();     //我叫Sigo
  32. 			p1.say();		//我叫Sigo
  33. 			c1.coding();	//我的工作是前端，我正在加班





【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/CafeMing/p/6624636.html