1.面向对象
1.1.定义多个属性描述符
var obj={
_age:18,//私有属性（js里面是没有严格意义的私有属性）
};
Object.defineProperties(obj,{
name:{
enumerable:true,
configurable:true,
writable:true,
value:"wjy"
},
age:{
enumerable:true,
configurable:true,
get(value){
return this._age;
},
set(value){
this._age=value
}
}
})
console.log(obj);//* 将所有的属性打印，除了不可枚举的属性
1.1.1 set和get的新型写法
- 这种的configurable为true，enumerable也为true
var obj={
_age:18,//私有属性（js里面是没有严格意义的私有属性）
set age(value){
this._age=value
},
get age(){
return this._age
}
};
等价于下面的这个
var obj={
_age:18,//私有属性（js里面是没有严格意义的私有属性
};
Object.defineProperties(obj,{
age:{
enumerable:true,
configurable:true,
get(value){
return this._age;
},
set(value){
this._age=value
}
}
})
console.log(obj);//* 将所有的属性打印，除了不可枚举的属性
1.1.2 私有属性
一般私有属性是以下划线开头，例如：_name
但这种在外部还是可以访问到的，因为js没有严格意义上的私有属性
1.2 对象方法补充
1.2.1 获取对象的属性描述符
-
获取对象的属性描述符
-
getOwnPropertyDescriptor
-
语法
Object.getOwnPropertyDescriptor(obj,prop) -
参数
- obj:要获取的是哪个对象的属性的属性描述符
- prop:对象的哪个属性
返回值：返回的是一个属性描述符对象
-
-
getOwnPropertyDescriptors
-
语法
Object.getOwnPropertyDescriptors(obj) -
参数
- obj:要获取哪个对象的所有属性描述符
-
返回值
- 返回的是所有属性描述符对象
-
-
var obj={
_age:18,//私有属性（js里面是没有严格意义的私有属性）
};
Object.defineProperties(obj,{
name:{
enumerable:true,
configurable:true,
writable:true,
value:"wjy"
},
age:{
enumerable:true,
configurable:true,
get(value){
return this._age;
},
set(value){
this._age=value
}
}
})
// * 获取特定属性的属性描述符
console.log(Object.getOwnPropertyDescriptor(obj,"name"));
console.log(Object.getOwnPropertyDescriptor(obj,"age"));
//* 获取对象所有属性的属性描述符
console.log(Object.getOwnPropertyDescriptors(obj));
1.2.2 阻止对象添加新的属性
Objet,preventExtensions(obj)
示例代码如下：
var obj={
name:"wjy",
age:18
}
//* 禁止对象添加新的属性
Object.preventExtensions(obj)
obj.height=1.99
obj.address="怀化市"
console.log(obj);//* { name: 'wjy', age: 18 }
1.2.3 禁止对象配置或删除里面的属性(Object.seal(obj))
Obect.seal()会将对象的所有属性变的不可配置
var obj={
name:"wjy",
age:18
}
//* 禁止对象配置或删除里面的属性
for(var key in obj){
Object.defineProperty(obj,key,{
configurable:false,
enumerable:true,
writable:true
})
}
console.log(obj);
可以转化为下面的：
var obj={
name:"wjy",
age:18
}
Object.seal(obj)
delete obj.name
console.log(obj.name);//* 没有删除成功，设置对象的所有属性为不可配置
1.2.4 让属性不可以修改(Object.freeze(obj))
让每个属性都不可以被修改其值，相当于给每个属性的属性描述符添加了这个 writable:false
我们可以有两种方式修改每个属性都不可以修改：
-
遍历每个属性
- 因为是在对象上直接定义的属性，这些属性的configurable、enumerable等都为true
var obj={ name:"wjy", age:18 } //* 不允许对象的属性被修改其值 for(let key in obj){ Object.defineProperty(obj,key,{ writable:false,//* 在这里只定义一个，但只是会覆盖之前定义的writable的值，但是enumerable、configurable等等还是之前设置的值 }) } obj.name="hyz" console.log(obj.name); delete obj.name;//因为configurable为true，所以是可以删除这个属性的 console.log(obj.name); -
使用Object.freeze(obj)
- 对象属性的值不能修改
- 不能往这个对象添加新的属性
- 不能删除对象的现有属性
- 不能修改已有属性的可配置、可枚举、可写性
var obj={
name:"wjy",
age:18
}
Object.freeze(obj)
obj.name="hyz"
console.log(obj.name);//wjy
delete obj.name;
console.log(obj.name); //wjy
2.创建多个对象的方案
- 如果我们现在希望创建一系列的对象：比如Person对象
- 包括张三、李四、王五、李雷等等，他们的信息各部相同
- 那么采用什么方式创建比较好
2.1 对象字面量
你会发现使用对象字面量创建同样类似的东西，代码会比较重复冗余，而且代码行数也在不断增加
var p1={
name:"张三",
age:18,
height:1.88,
address:"广州",
eating:function(){
console.log(this.name+"在吃东西~");
},
running:function(){
console.log(this.name+"在跑步~");
}
}
var p2={
name:"王五",
age:20,
height:1.92,
address:"怀化",
eating:function(){
console.log(this.name+"在吃东西~");
},
running:function(){
console.log(this.name+"在跑步~");
}
}
....
2.2 工厂模式
我们可以想到的一种创建对象的方式：工厂模式
- 工厂模式其实是一种常见的设计模式
- 通常我们会有一个工厂方法，通过该工厂方法我们可以产生想要的对象
function createPerson(name,age,height,address){
return{
name,
age,
height,
address,
eating(){
console.log(this.name+"在吃东西");
},
running(){
console.log(this.name="在跑步");
}
}
}
var p1=createPerson("张三",18,1.81,"广州市")
var p2=createPerson("王五",20,1.92,"怀化市")
var p3=createPerson("李四",40,1.63,"长沙市")
console.log(p1,p2,p3);
2.2.1 缺点
- 没有对应的类型，都是对象字面量，都是Object类型，获取不到对象最真实的类型
2.3 认识构造函数
工厂方法有一个比较大的问题：在我们打印这个对象时，对象的类型是Object类型
- 但是从某些角度来说，这些对象应该有一个他们共同的类型：
- 下面我们来看一下另外一种模式：构造函数的方式
2,3,1 什么是构造函数
- 构造函数也称为为构造器(constructor)，通常是我们在创建对象时会调用的函数
- 在其他面向对象的编程语言种，构造函数是存在于类中的一个方法，称之外构造方法
- 但是javascript种的构造函数有点不太一样
javascript的构造函数是怎么样的？
- 构造函数也是一个普通的函数，从表现形式来说和千千万万个普通的函数没有任何区别
- 那么如果这么一个普通的函数被使用new操作符来调用了，那么这个函数被称之为是一个构造函数
function foo(){
console.log("foo");
}
// * foo是一个普通的函数
foo()
//* 如果通过new关键字调用这个函数，这个函数被称之为是一个i构造函数
new foo();//* 如果不需要传参，这个小括号其实也是可以省略的
new foo
那么通过new关键字调用函数，和普通调用有什么区别呢？
2.3.2 new操作符调用的作用
如果一个函数被new操作符调用了，那么它会执行如下操作：
- 在内存中创建一个新的对象（空对象）
- 这个对象内部的[[prototype]]属性会被赋值为该函数的prototype属性
- 构造函数内部的this，会指向创建出来的新对象
- 执行函数的内部代码 （函数体代码）
- 如果构造函数没有返回其他对象，则返回创建出来的新对象
/**
* 如果一个函数被new操作符进行调用，它会执行如下操作
* * 1 在内存中创建一个新的对象(对象)
* * 2 将这个新对象的prototype属性赋值为这个函数的prototype属性
* * 3 构造函数内部的this，指向这个创建的新对象
* * 4 执行函数内部的代码
* * 5 如果构造函数没有返回非空对象，则将这个新对象返回
*/
function Person(name,age,address){
this.name=name;
this.age=age;
this.address=address;
this.eating=function(){
console.log(this.name+"在吃东西.");
}
this.running=function(){
console.log(this.name+"在跑步。");
}
}
var p1=new Person('张三',19,"怀化");
var p2=new Person('李四',22,'北京');
console.log(p1);
console.log(p2);
console.log(p1==p2);
// Person {
// name: '张三',
// age: 19,
// address: '怀化',
// eating: [Function],
// running: [Function]
// }
// Person {
// name: '李四',
// age: 22,
// address: '北京',
// eating: [Function],
// running: [Function]
// }
2.3.3 缺点
比较浪费空间，对于一些共同使用的函数没必要每创建一个对象，就创建一个新的函数的空间
2.4 构造函数和原型组合
我们在上一个构造函数的方式创建对象时，有一个弊端：会创建重复的函数，比如running、eating这些函数
- 那么有没有一种办法让所有的对象去共享这些函数呢？
- 可以，将这些函数放入到构造函数的prototype的对象上即可。
function Person(name,age,address){
this.name=name;
this.age=age;
this.address=address;
}
Person.prototype.eating=function(){
console.log(this.name+"在吃东西");
}
Person.prototype.running=function(){
console.log(this.name+"在跑步。");
}
var p1=new Person("wjy",20,"怀化")
var p2=new Person("hyz",20,"怀化")
p1.eating()
p2.eating()
3.原型
3.1认识对象的原型
javascript当中的每个对象都有一个特殊的内置属性[[prototype]]属性，这个特殊的对象可以指向另外一个对象,它就是对象的原型（隐式原型）
- 不能直接看到
- 不能直接修改
- 不能直接用到
早期的ECMA是没有规范如何去查看 [[prototype]]
浏览器给对象提供了一个属性，它可以去查看对象的[[prototype]]
__proto__
es5之后，提供了新的方法可以获取对象的[[prototype]]
Object.getPrototypeOf(obj)
其实获取对象的某个属性的值，会触发[[get]],然后会执行以下两个操作
- 会从当前对象查找有没有这个属性，如果有，则返回
- 没有的话则去对象的[[prototype]]查找，如果没有，则返回一个undefined
// 每一个对象都有一个[[prototype]]，这个属性可以称之为对象的原型(隐式原型)
//* ①这个原型看不到 ②以后我们也不会改它 ③我们也不会直接用它
var obj={name:'wjy'} //[[prototype]]
var info={} //[[prototype]]
// * 早期的ECMA是没有规范如何查看 [[prototype]]
// * 给对象中提供了一个属性，可以让我们查看一下这个原型对象（浏览器提供）
//* 这个属性是 __proto__
console.log(obj.__proto__); // {}
console.log(info.__proto__); //{}
// * es5之后提供了 getPrototypeOf 获取原型对象 ，但是测试不方便
console.log(Object.getPrototypeOf(obj));//{}
//* 2.原型有什么用呢
// * 当我们从一个对象中获取某一个属性时，它会触发 [[get]]操作
// * 会做以下两个操作：(1)会从当前对象中查找对应的属性，如果还没找到 会从它的[[prototype]]查找
obj.__proto__.like="hyz"
console.log(obj.like);
3.2 函数的原型理解
function foo(){
}
//* 函数作为对象，也有[[prototype]]（隐式原型的）
// * __proto跟new Function()有关
console.log(foo.__proto__); //[Function]
//* 函数它因为是一个函数，所以它还多出来一个显式原型属性：prototype
//* 在new操作符调用函数的第2个步骤：
//这个新创建的对象的[[prototype]]指向构造函数的prototype
// this.__proto__=foo.prototype
console.log(foo.prototype);
var f1=new foo();
var f2=new foo();
console.log(f1.__proto__==foo.prototype);//true
console.log(f2.__proto__==foo.prototype);//true
3.2 创建内存中的表现
[图片上传失败...(image-d9c2a7-1651200561805)]
3.4 constructor属性
原型对象上其实有一个constructor属性，它指向的是当前这个函数，因为它是不可枚举的，所以直接打印或遍历或使用Object.keys都是无法返回该属性的
function Person(){
}
console.log(Person.prototype);//Person {},它是指向这个函数
console.log(Object.getOwnPropertyDescriptors(Person.prototype));//打印Person.prototype所有属性描述符
[图片上传失败...(image-3e3e59-1651200561805)]
console.log(Person.prototype.constructor); //[Function: Person]
3.5重写整个原型对象
如果我们需要在原型上定义很多个属性或方法，其实可以去重写原型对象
3.5.1 未重写原型对象前
function Person(){
}
Person.prototype.name="wjy"
Person.prototype.age=28
Person.prototype.address="怀化市"
Person.prototype.eating=function(){
console.log(this.name+"在吃东西。");
}
Person.prototype.running=function(){
console.log(this.name+"在跑步。");
}
3.5.2 重写原型对象后
- 每创建一个函数，就会同时创建它的prototype对象，这个对象也会自动获取constructor属性
- 而我们这里相当于给prototype重新赋值了一个对象，那么这个新对象的prototype属性会指向Object构造函数，而不是Person构造函数
console.log(Person.prototype.constructor); //[Function: Object]function Person(){
}
Person.prototype={
name:"wjy",
age:28,
address:"怀化市",
eating:function(){
console.log(this.name+"在吃东西、");
},
running:function(){
console.log(this.name+"在跑步。");
}
}
console.log(Person.prototype.constructor); //[Function: Object]
所以我们需要修改这个原型对象的constructor属性
//* 给原型对象，添加constructor属性，它的值是这个函数，不可枚举、可配置、可写
Object.defineProperty(Person.prototype,"constructor",{
configurable:true,
enumerable:false,
writable:true,
value:Person
})
4.总结
对象补充、原型、函数原型、创建对象.png
