上一篇中跟大家说了构造函数，这里我们来说说创建对象，有的朋友看到题目后会想，创建一个对象并不难，我们平时最常用到的就是对象了，例如：
let obj = {}
常用定义与赋值方法obj.prop =value或者obj['prop']=value
let obj = {
// key: value
k: '数据',
name: 'szc'
}
obj.name = 'Hantao';
obj['car'] = '小马';
console.log(obj.name); // Hantao
console.log(obj.car); // 小马
那么你对构造函数对象到底了解多少呢？今天来一起看下构造函数的对象，首先来了解对象的一个属性
Object.defineProperty()
通过这个方法你可以获取到对象构造函数的数据属性和访问器属性，并且可以通过设置进行对默认的属性进行修改，下面我们分别来试试这两种不同的属性
对象的构造函数.定义属性 === 数据属性
// '对象名'， '属性' '属性描述值'
Object.defineProperty(object, 'property', {
configurable: true, // 默认：true 能否通过delete删除属性，能否修改属性的特性、能否把属性改为访问器属性
enumerable: true, // 默认：true 能否通过for in 遍历得到
writable: true, // 默认：true 是否可以修改属性的值
value: true, // 默认：undefined 包含这个属性的数据值
})
// 如果要修改对象的默认属性值，可以通过上面的方法进行修改
// 例子：
Object.defineProperty(obj, 'k', {
configurable: true,
writable: false,
})
obj.k = 2;
console.log(obj)
对象的构造函数.定义属性 === 访问器属性
// Object.defineProperty(obj, 'name', {
// configurable: 默认：true
// enumerable: 默认：true
// set: 设置
// get: 获取
// })
Object.defineProperty(obj, 'name', {
get: function() { // 当在下面进行获取时，get拦截到，返回一个值，获取到的值都为11
return '11'
},
set: function(val) { // 下面重新设置时，被set拦截到，会返回一个下面设置的值
console.log(val)
}
})
console.log(obj.name)
obj.name = 1;
console.log(obj.name)
在这里插入一个简单的例子，可以清楚的理解我在代码中写的注释.
输入框输入，实时根据输入的内容，在下面进行显示
123.gif
var txt = document.getElementById('txt'); // 获取input
var app = document.getElementById('app'); // 获取div盒子
var obj2= { // 对象的k为空字符串
html: '',
}
app.innerHTML = obj2.html; // 盒子的innerHTML为对象中的内容
Object.defineProperty(obj2, 'html', { // 通过访问器属性
set: function(val) { // set属性获取设置的值
app.innerHTML = val; // 将获取的值赋值给盒子的innerHTML
}
});
txt.oninput = function() { // 监听输入框的输入事件
obj2.html = this.value; // 对象中的html等于触发这个事件的value值
}
简单的说了一下这个属性，下面我们重点是要创建对象的几种模式：
1.工厂模式：
工厂模式的特点：
1.显式的创建对象
2.显式的返回一个对象
3.缺点：无法判断对象的类型
function factory(name, age, sex, car) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sex = sex;
obj.car = car;
return obj;
}
var obj3 = factory('hyj', 18, 'girl', '汽车');
console.log(obj3)
2.构造函数模式
构造函数模式的特点：
1.没有显式的创建对象
2.隐式返回了新的对象
3.可以判断对象类型(属于这个构造函数)
4.缺点: 因私有而冗余：所有的方法和属性都会在实例上创建一遍
function Factory(name, age, sex, car) {
this.name = name;
this.age = age;
this.sex = sex;
this.car = car;
this.eat = function(food) {
console.log('我正在' + food);
}
}
var obj4 = new Factory('szc', 22, 'boy', '自行车');
console.log(obj4)
3.原型模式：将属性和方法都放在原型对象上
问题：
本质：因为共享的特性，导致原型上引用类型在各个实例上会影响
原型中所有属性同时被很多实例共享的
对于包含引用类型值的属性来说，会导致所有的实例都受到影响
function Ht() {
}
Ht.prototype.name = 'ht';
Ht.prototype.age = '26';
Ht.prototype.arr = [1, 2, 3];
Ht.prototype.eat = function(food) {
console.log('我正在' + food);
}
var obj5 = new Ht();
console.log(obj5.name)
obj5.eat('学习')
4.组合式：构造 + 原型
建议使用这种方法，集合了其它几种的优点
// 私有属性
function People(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
// 共享的方法
People.prototype.eat = function(food) {
console.log('我正在' + food);
}
var obj6 = new People('ht', 28, 'boy');
obj6.eat('学习');
console.log(obj6.__proto__)
这些是我常用到的几种模式，除了这些还有很多其他的方法，需要的朋友可以在网上搜索，或者本文中有哪里写错的地方，也希望大家指出。
网友评论