傲娇的js之源----Object()

一、常见创建对象的方式

1.{} 这个叫做对象字面量

var obj = {};

2. new Object() 这个叫做new出来的对象

var obj2 = new Object();

这两种创建对象方式,从测试效果来看,{}会快一点,new关键字调用了构造函数而{}不会。如果new Object()中没有传入参数,与{}是一样的。

3.探讨一下new做了什么?

//自定义new
function Person(name,age) {
    this.name = name;
    this.age = age;
}

var person = new Person("muzidigbig",23);

console.log(person);//Person {name: "muzidigbig", age: 23}

new创建过程:

1).首先,创建一个新的空对象。即:var person = {}

2).再次,新对象的原型对象(__ptoto__属性)指向了构造函数的原型对象。即:person.__proto__ === Person.prototype

3).然后,将构造函数中的this指向新对象。即:Person.call(person)

4).再然后,改变构造函数中的this指向,使其指向新对象(属性添加给新实例对象person)。

5).最后,返回新实例对象person。

原理:

1、2、3)隐式操作调用Object.create(继承某个对象的原型,{给新对象添加属性});

使用new关键字创建对象的最根本原理是内部调用了Object.create();方法来实现,并由此实现原型继承。

二、new Object(value)  参数

new Object()将会根据参数value的数据类型,返回对应类型的对象:

    1.如果value为基本数据类型String、Number、Boolean,则返回对应类型的对象。

  • 传入String 返回String,类似new String()
  • 传入Number 返回Number,类似new Number()

    2.如果value本身为对象,则返回其本身。

    3.如果省略了value参数,或value为null、undefined,则返回自身无任何属性的Object对象,即返回一个空对象<===>{}。

var obj = new Object("muzidigbig");
console.log(obj instanceof Object);//true
console.log(obj instanceof String);//true
console.log(obj.length);//4
console.log(obj[0]);//m
/*即类似于obj = {0:"t", 1:"e", 2:"x", 3:"t"};*/
var obj1 = new Object({age:23});
console.log(obj1.age);//23

 总结:

var obj = function() {};
var a = {};
var b = new Object();
var c = new Obj();

c最快,a次之,b最慢。

三、使用 Object.create(obj,propertiesObject) 方法创建对象

使用这种方式创建对象,可以很方便的从一个已经存在的对象创建一个新对象,而不用使用new关键字。

Object.create(obj,propertiesObject)方法基于一个已经存在的对象作为新创建对象的原型

使用Object.create()方法创建对象,只需要记住它需要传入两个参数

obj:第一个参数可以是任意一个对象,该对象作为新创建对象的原型。

propertiesObject:第二个参数是可选参数,类型是对象,该对象包含向新创建对象添加的属性。该参数对象是一组属性与值,该对象的属性名称将是新创建的对象的属性名称,值是属性描述符(这些属性描述符的结构与Object.defineProperties()的第二个参数一样)。注意:该参数对象不能是 undefined,另外只有该对象中自身拥有的可枚举的属性才有效,也就是说该对象的原型链上属性是无效的。

假设有一个班级对象Class:

var classObj = { className: "一班", studentNum: 100 }

现在想为这个班级创建一个学生,可以使用如下方式:

var studentObj = Object.create(classObj, {
 studentName: {
 	value: "小明"
 },
 studentAge: {
 	value: 29
 }
})

注意:第二个参数的写法是一个对象。

总结:使用Object.create()是将对象继承到__proto__属性上。

四、使用 Object.assign() 方法: 主要用于对象合并,将源对象中的属性复制到目标对象中,他将返回目标对象。

假如我们想创建一个拥有一个以上对象的所有属性的新对象,Object.assign()方法可以实现这种目的。

Object.assign()方法用来将一个或多个源对象的所有可枚举的属性拷贝到一个目标对象中,返回目标对象

用法:

Object.assign(target, ...sources)

参数:target--->目标对象

           source--->源对象

返回值:target,目标对象

 Object.assign()可以接受任意数量的对象作为参数。

假设有如下两个对象:

var orgObj = { company: "Baidu" };
var carObj = { carName: "Kayan" };

现在需要一个在Baidu公司开着Kayan的员工,可以使用如下方式创建对象:

var employee = Object.assign({}, carObj, orgObj);

consoloe.log(employee);//{carName: "Kayan", company: "Baidu"}

目标对象和源对象没有同名属性 

var target = {name:'带你飞'}
var source = {age:18}
var result = Object.assign(target,source)
console.log(result,target===result); // {name: '带你飞', age: 18} true

如果只是想将两个或多个对象的属性合并到一起,不改变原有对象的属性,可以用一个空的对象作为target对象。像下面这样:

var result=Object.assign({},target,source);

如果有同名属性的话,后面的属性值会覆盖前面的属性值。 

原始类型会被包装为对象 

var source1 = "abc";
var source2 = true;
var source3 = 10;
 
var result = Object.assign({}, source1, null, source2, undefined, source3); 
// 原始类型会被包装,null 和 undefined 会被忽略。
// 注意,只有字符串的包装对象才可能有自身可枚举属性。
console.log(result); // {0: 'a', 1: 'b', 2: 'c'}

对象的拷贝 

var object1 = {
  a: 1,
  b: 2,
  c: 3
};
 
var object2 = Object.assign({c: 4, d: 5}, object1);
 
console.log(object2.c, object2.d); // 3 5
console.log(object1)  // { a: 1, b: 2, c: 3 }
console.log(object2)  // { c: 3, d: 5, a: 1, b: 2 }
Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。

对象的深拷贝

深拷贝:深拷贝不会拷贝引用类型的引用,而是将引用类型的值全部拷贝一份,形成一个新的引用类型,这样就不会发生引用错乱的问题,使得我们可以多次使用同样的数据,而不用担心数据之间会起冲突。

    let object1 = {
		a: 1,
		b: 2
	};
 
	let object2 = Object.assign({}, object1, {
		b: 20
	});
 
	console.log(object1); // { a: 1, b: 2 }
	console.log(object2); // { a: 1, b: 20 }

对象的浅拷贝

浅拷贝:浅拷贝只是复制了对象的引用地址,两个对象指向同一个内存地址,所以修改其中任意的值,另一个值都会随之变化,这就是浅拷贝 

var object1 = {
		a: 1,
		b: {
			c: 2,
			d: 3
		}
	};
var object2 = Object.assign({}, object1);
	object2.a = 10;
	object2.b.c = 20;
	console.log(object1); // { a: 1, b: { c: 20, d: 3 } }
	console.log(object2) //{ a: 10, b: { c: 20, d: 3} }

总结:
      object.assign()主要用于对象合并,将源对象中的属性复制到目标对象中,他将返回目标对象。如果有同名属性的话,后面的属性值会覆盖前面的属性值,如果有多个源对象,没有同名的属性会直接复制到目标对象上,还可以进行对象的深浅拷贝,当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝,但是对象中有对象的时候,此方法,在二级属性以后就是浅拷贝。

Object.assign()怎么用? - 麦芽无心 - 博客园

五、单例的方式创建对象

singleton(单例)方法创建对象

代码如下:

var person = new function(){
 this.name = "tudouya"
};

六、使用ES6 class创建对象

使用ES6 class创建对象与使用用户定义的函数构造器创建对象方法类似。构造器函数被类替代,因为它遵循ES6规范。

示例如下:

class Person {
  constructor(firstName, lastName) {
 	this.firstName = firstName
 	this.lastName = lastName
  }
};
var person = new Person("muzidigbig", "Lee");

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值