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
})