多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
[TOC] # 创建对象的方式 ## 1.字面量创建对象的方式 直接使用字面量方式创建对象比较方便,以**键值对**的格式来定义数据 ``` var book1 = { name:"JavaScript权威指南", price:100, author:"tim", showInfo:function () { console.log(this.name,this.price,this.author); } } console.log(book1); ``` ## 2.通过内置构造函数方式 内置构造函数方式创建对象----------------系统自带的方式 ** new Object()** ``` var book2 = new Object(); book2.name="JS"; book2.price=10; book2.author="作者"; book2.showInfo=function () { console.log(this.name,this.price,this.author); } book2.showInfo(); ``` ***** 前面两个方式是比较简单,容易,但是代码冗余 ## 3.工厂模式 把**内置构造**函数的方式**封装成函数** ```javascript function createBook(name, price, author) { var book = new Object(); book.name=name; book.price=price; book.author=author; book.showInfo=function () { console.log(this.name,this.price,this.author); } return book; } var book3 = createBook("bookName1",10,"author1"); var book4 = createBook("bookName2",10,"author2"); console.log(book3); ``` ### 3.1 工厂模式的缺陷 工厂模式**没有办法找到父类** ```javascript function createPerson(name,age,sex) { var per = new Object(); per.name = name; per.age = age; per.sex = sex; return per; } var per1 = createPerson("ls",18,1); console.log(per1); function createDog(name,age,sex) { var dog= new Object(); dog.name = name; dog.age = age; dog.sex = sex; return dog; } var dog1 = createDog("wc",3,0); console.log(dog1); // instanceof 判断对象的父亲是否为这个函数,是则返回值是true,不是返回值则是false console.log(per1 instanceof createPerson); /*false 父亲找不到*/ console.log(dog1 instanceof createDog); /*false 父亲找不到*/ /*工厂模式的bug*/ ``` #### 3.1.1判断对象是谁创建的(对象的父类是谁)-------instanceof 如果一个对象是函数创建的返回值是**true**,不是则返回的是**false** ## 4. 自定义构造函数的方式 **注意** 1)构造函数名的**首字母要大写** 2)构造函数体里**没有return**,会自动返回 3)需要使用**关键字new 和构造函数**一起创建对象 4)在函数中,不需要手动创建对象进行数据封装,会自动创建并封装数据 ``` function CreatePerson(name, age, sex) { this.name=name; this.age=age; this.sex=sex; } //实例化对象 var p = new createPerson("Neld", 10, 1); var p2 = new createPerson("Song", 12, 0); console.log(p); console.log(p2); ``` ***** #### 4.1 自定义构造函数到底是如何创建并封装对象呢? 1. 在函数内部默认会创建一个空对象 var obj = new Object(); 2. 默认把创建好的对象赋值给this this = obj; 3. 默认设置this的原型对象为当前构造函数的原型对象 4. 通过this添加属性和方法 5. 默认会把内部创建的对象返回 return this; ### 3.构造函数对象的默认返回值修改问题 默认情况下,构造函数内部会返回创建好的对象(this) 1. 如果返回**值类型**的数据,仍然返回创建好的对象(this),不做任何修改 2. 如果返回**引用类型**的数据,则返回指定的数据,不再返回this。 ``` function Person(name,age) { this.name = name; this.age = age; // return 9999;/*不起作用*/ return [];/*起作用*/ } var p1 = new Person("ls",13); console.log(p1); ``` <br> ## 5.Object.create() ***** 创建对象,并设置原型对象 (创建传递进来的对象,并设置该对象的原型对象为当前的参数---) ***** ``` var temp \={ name:"wc", age :3, } var obj  \=Object.create(temp);//把对象的参数设置为该对象的参数 console.log(obj); ``` 在原型上的参数 ![](https://img.kancloud.cn/2e/6a/2e6a63126dc964d9d9392e2ae5cec6d7_262x132.png) <br> **创建一个没有原型的对象** *** ``` ar o  =Object.create(null); // 可以添加属性,但是没有原型 o.name ="wc"; o.age =3; o.sex=1; console.log(o); ``` ***** ![](https://img.kancloud.cn/a9/bd/a9bd9bd6f807044a3f5a4d10e473bfaa_408x111.png) ## 6.Object.assign() 将多个对象合并到一个对象中并返回 ~~~ var obj = {name:"Neld", age:10}; console.log(Object.assign(obj, {info: "xxx"}, {name: "zs"})); ~~~ > **如果多个对象想存在相同的属性,后面会将前面属性值覆盖。**