[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"}));
~~~
> **如果多个对象想存在相同的属性,后面会将前面属性值覆盖。**
- Javascript
- 组成
- Web API
- 初步认识DOM
- 经典案例 (使用获取id的方法)
- 节点和元素
- 经典案例 (使用获取节点和元素的方法)
- 函数
- 作用域链
- Array对象的方法
- String对象的方法
- 绑定事件
- 事件委托
- 逻辑运算
- js高级(面向对象、)
- 基本知识
- 数据类型
- 基本包装类型的使用
- 定义变量的区别
- JavaScript对象的动态特性
- 关键字in
- 关键字delete
- 运算符
- 创建对象的方式
- 回调函数
- 高阶函数
- 构造器属性
- this指向
- hasOwnProperty属性
- 私有成员和特权方法
- 面向对象和面向过程的基础
- 异常捕获
- 构造函数和普通函数的区别
- 构造函数的补充
- 原型
- 原型图
- 获取原型对象的方法
- 原型对象的访问和设置
- 判断某个对象是否是指定实例对象的原型对象
- constructor
- isPrototypeOf
- instanceof
- 检测对象是公有还是私有
- 核心概念
- 继承
- 混入式继承
- 原型式继承
- 原型链继承
- 借用构造函数继承(call继承,经典继承)
- 组合式继承(推荐)
- class继承
- __ proto __属性
- call方法和apply方法
- Fuction相关知识
- 创建函数的方式
- eval函数
- 浅拷贝和深拷贝
- 浅拷贝
- 深拷贝
- Object相关知识
- Object原型属性和方法
- Object静态成员对象
- 案例
- 数组去重
- 闭包
- 语法
- DOM事件和闭包
- 定时器和闭包
- 即使对象初始化
- 闭包的变形
- 设计模式
- 单例模式
- 发布订阅模式(观察者模式)
- 工厂模式
- 命名空间模式
- 同步和异步
- 垃圾回收机制
- get和set
- JQuery
- 动画方法
- 事件
- 方法
- 节点
- 方法er
- HTML + CSS
- 经验
- flex布局
- px,em ,rem区别
- 清除浮动
- Less
- UI框架
- 一.Bootstrap框架
- 常用类名
- 二 .Animate.css
- 三.WOW.JS
- 四.scrollReveal.js
- 五.zepto框架
- zepto选择器
- 滑动事件
- tap触摸事件
- zepto动画
- 六,swipe框架
- 分页器
- 左右按钮和循环轮播
- 底部滚动和轮播方向
- 自动播放和切换效果
- 移入移除事件
- swipe结合animate.css
- 总结
- 滚滚屏
- 自动化构建工具
- 1.gulp
- 使用gulp编译less成css,并最终压缩css
- 压缩css
- 合并和压缩js
- 压缩图片
- 编写server服务
- 包管理器
- 介绍
- brew
- npm十全大补汤
- ES6
- class类
- class类的使用
- class类的继承结构
- let 和const
- 结构语法
- 模板字符串
- 化简写法
- 形参的默认值
- ...rest参数
- rest剩余参数
- 扩展参数
- 正则表达式
- 创建正则表达式的方式
- 构造函数
- 字面量的方式
- 其他(修饰符)
- 判断是否匹配成功
- 正则表达式案例
- 常见的匹配原则
- 验证密码长度
- 表单验证
- 正则提取
- 正则替换
- vue
- 插值操作
- Mustache语法
- 过滤器
- 绑定相关知识
- 绑定对象
- 单向绑定
- 双向绑定
- 绑定属性
- 动态绑定style
- 绑定事件
- 补充
- 绑定语法
- 基础
- vue介绍
- MVVM
- 计算属性
- 指令
- v-cloak
- 显示和隐藏
- 循环
- 自定义指令
- 本地缓存
- localStorage
- sessionStorage
- 对象劫持
- 组件
- 局部组件
- 父子组件
- 全局组件
- 组件访问实例数据
- 父传子
- 子传父
- 兄弟传兄弟
- 插槽
- methods,computed,watch的区别
- Vue.observable()
- vue.config.js配置
- 修饰符
- .sync修饰符
- $attrs和$listeners
- Node.js
- 使用Node执行js代码的两种方式
- 交互模式
- 解释js文件
- http模板
- request对象的使用
- express框架
- 安装
- post
- 获取请求参数
- post返回页面
- 重定向到别的接口
- get
- 返回页面
- get获取请求参数
- 请求静态资源
- 热重启
- Ajax
- 请求方式
- get请求
- post请求
- jQuery中的ajax方法
- JQuery中的get请求
- jQuery中的post请求
- 微信小程序
- 认识
- 引入样式的方式
- 绑定数据
- 小程序组件
- scroll - view 可滚动视图区域
- 发起请求
- template模板
- rich-text
- web-view
- open-data
- checkbox组件
- label组件
- radio组件
- picker组件
- swiper组件
- Git
- 跨域
- 左侧固定,右侧自适应
- vuex
- 如何解决vuex页面刷新数据丢失问题
- 数据结构
- 树
- 问题累积
- Axios
- 前端路由