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

    一、 包装对象
                 *     在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();	//我的工作是前端，我正在加班





  • 相关阅读:
    深入浅出JSONP--解决ajax跨域问题
    Apache与Tomcat的区别
    项目终于接近尾声了
    交互设计[小插曲]--网站UI配色
    使用 Jasmine 进行测试驱动的 JavaScript 开发
    javascript单元测试
    MySQL查询当前数据库中所有记录不为空的表
    cannot be resolved to a type的错误
    oracle 表空数据导出dmp ，空表导出失败
    Iterable<E> Iterator<E>
  • 原文地址：https://www.cnblogs.com/CafeMing/p/6624636.html
Copyright © 2020-2023  润新知