js对象的总结（1）

一、对象的定义：

                对象是JavaScript的一个基本数据类型，是一种复合值，它将很多值（原始值或者其他对象）聚合在一起，可通过名字访问这些值。即属性的无序集合。

二、对象的创建（3种方法）

1、对象直接量/字面量：

var obj = {
                name: 'zsn',
                age: 18
            }
            console.log(obj.name);//zsn

 

2、构造函数：

1. 系统自带的， ps: new Object(), Array(), Number(), Boolean(), Date()...

var obj = new Object();
            obj.name = 'zsn';
            console.log(obj.name);
//            zsn

       2.自定义的： 为了和普通函数区分，首字母大写，采用大驼峰写法；

function Obj(name){
    this.name = name;
    this.age = 18
}
var obj = new Obj('zsn');
console.log(obj.name);//zsn
console.log(obj.age);//18

自定义构造函数的基本构造原理：

        关键是有没有new这个操作符，不用new,Obj('zsn')就是一个函数的正常执行，没有返回值，则默认返回undefined;

而是用new操作符后js引擎就会将该函数看作构造函数看待,返回值就是一个对象了。demo如下：

function Obj(){
                this.age = 18;
            }
            //不用new
            console.log(Obj());//undefined
            //用new
            console.log(new Obj());//Obj {age: 18}

用new和不用new不同的原因：

不用new，函数内的this指向的是window，所以this.xxx定义的变量都是window上的属性，但为什么使用new后其中的this就不是window对象了呢？那是因为用new后，js引擎会在函数被进行两步隐士操作(假设构造函数名为Person)：第一步， var this = Object.create(Peson.prototype);   （也是创建对象的一种方法，下边会讲到）  隐士的改变函数内this的含义，现在函数内的this是一个原型为Person.prototype， 构造函数为Person的对象（其实此过程就将想要的对象基本创造成功了，只是差些属性而已，从此可是看出构造函数创建对象的最根本原理是借用Object.create()方法来实现的，只不过被封装功能化了）； 第二步, 在创建的对象设置完所需要的属性后，隐士的将创建的对象this通过return返回  return this; 

        通过代码的展现：

//  构造函数的原型
          

 Person.prototype = {
                say: function(){
                    console.log('I am saying');
                }
            }
            //  构造函数
            function Person(){
                 //  隐士操作
                 //var this = Object.create(Person.prototype);
                 
                 //返回对象属性的设置
                 this.name = "zsn";
                 this.age = 18
                 
                 //  隐士操作
                 //return this;
            }
            var person1 = new Person();
            console.log(person1.name); //zsn
            person1.say(); //I am saying

上述两步理论的验证：

第一步：现在函数内的this是一个原型为Person.prototype， 构造函数为Person的对象

//  构造函数的原型
			Person.prototype = {
				say: function (){
					console.log('I am saying');
				}
			}
			//  构造函数
			function Person(){
				this.name ='zsn';
				this.age = 18;
				// 打印this对象的原型
				console.log(this.__proto__);
				// 验证this是否是Person构造函数的实例
			    console.log(this instanceof Person);//true
			}
			new Person();//打印结果如下
			//  Object say: ()__proto__: Object
            // true
            
            Person();//打印结果如下
            //  Window
    		// false

第二步：隐士的将创建的对象this通过return返回

//  构造函数的原型
			Person.prototype = {
				say: function (){
					console.log('I am saying');
				}
			}
			//  构造函数
			function Person(){
				var that = Object.create(Person.prototype);
				
				that.name ='zsn';
				that.age = 18;
				
				return that;
				//提前返回that导致return this无法执行而失效
				
			}
			
			var person = new Person();
			//此处不用new也是可以成功返回一个满足条件的对象，因为显示的返回了that
			console.log(person.name); //zsn
			person.say();//I am saying

ps. 关于显示返回that的问题，当我们用new生成对象，若我们显示return的是一个对象 / 引用值，则会导致return this失效，若返回的是原始值，则return this不会失效

 

3、Object.create(原型)； 创建一个继承该原型的实例对象

关于此方法的一些事项：

        （1）、若传参为Object.prototype，则创建的原型为Object.prototype，和 new Object()创建的对象是一样的  

Object.create(Object.prototype) <==> new Object();

        （2）、若传参为空 或者 null，则创建的对象是没有原型的， 导致该对象是无法用document.write（）打印会报错，因为document.write()打印的原理是调用Object.prototype.toString()方法，该对象没有原型，也就没有该方法，所以document.write()无法打印

          由此延伸的知识点： 引用值都也是算作是对象，所以都可以用document.write()打印；原始值numebr, boolean, string都有自己对象的包装类，借助此机制也是可以用document.write()打印出的；但undefined 和 null既不是引用值，也没有对应的包装类，所以应该无法打印的，但大家会发现这两个值也是可是用document.write()打印的，因为这两个值被设定为特殊值，document.write()打印其是不用调用任何方法的，而是之直接打印其值。

三、对象的增、删、改、查

1、增：

var obj = {};
			console.log(obj.name); //undefined （不会报错）
			obj.name = 'zsn';
			console.log(obj.name); //zsn

2、删：

var obj = {
				name : "zsn"
			};
			console.log(obj.name); //zsn 
			delete obj.name;
			console.log(obj.name); //undefined

3、改：

var obj = {
				name : "zsn"
			};
			console.log(obj.name); //zsn 
			obj.name = 'obj';
			console.log(obj.name); //obj

4、查：

var obj = {
				name : "zsn"
			};
			// 第一种方法
			 console.log(obj['name']);//zsn 
			//  第二种方法
			console.log(obj.name); //zsn
//p.s.最本质的是第一种方法，因为在使用第二种方法时，后台自动将其转换为第一种字符串的形式来查询 

ps.以上的增、删、改三种操作都只是针对当前对象的属性进行操作，而不会影响到当前对象的原型的属性。而查询是先看看当前对象本身是否设置了该属性，如果当前对象未设置该属性，则再看该对象的原型中是否设置了该属性，若两者都没有，则返回undefined

 

四、包装类：

1、五个原始值：number, string , boolean, undefined, null 其中number, string, boolean是分别拥有自己的包装类，而undefined和null是没有自己的包装类的

2.原始值不是对象，无法拥有自己的属性，但因为的包装类的存在，原始值就好似可以拥有自己的属性了，但其拥有的属性又有点特殊之处，如下用string来举例：

先看一段code

//  str是string类型的，非对象，不能拥有属性，为什么能打印出str.length?
			var str = 'abcd';
			console.log(str.length);//4

上边code中问题的解释：

// 因为每次执行完一条完整js语句后该类型对象的包装类就会将该语句包装，所以也就不会导致报错了，这些都是后台自己写的
			var str = 'abcd';
			// var str1 = new String('abcd');
			console.log(str.length);//4
			//var str1 = new String('abcd');
			//console.log(str1.length);

注意：每次包装类包装完一次完整语句后就会被销毁。（即解释一条语句，用包装类包装一次，然后销毁），这回导致其和正常对象的一些不同之处，如下例子

var str = 'abcd';
			// var str1 = new String('abcd');
			//销毁
			str.len = 4;
			//var str1 = new String('abcd');
			//str1.len = 4;
			//销毁
			console.log(str.len); //undefined
			var str1 = new String('abcd');
			console.log(str.len); //str1为刚创建的对象，其len属性自然为undefiend
			//销毁

一个易错的坑：

// 总之记得'原始值包装类''销毁'这两句话就行
			var str = 'abcd';
			str.length = 2;
			console.log(str);
			console.log(str.length);

                                                                                                                                                            参考：https://www.cnblogs.com/libin-1/p/5911190.html