- 类的概念
- 实例对象
- 万事万物皆对象
- javascript对象
- javascript创建对象的方式
- 对象的访问方式
- 为对象添加新的属性
- 工厂方法
- 构造函数
- this
- 属性描述对象
- Object.defineProperty
- 属性描述对象
- 存取描述对象
- 课堂练习
类的概念
某一类的事物的高度抽象,在类里设定了一些这类事物共有的特性和方法.
- 人类就是人的高度抽象,人类拥有的语言,学习,开车等特性和方法
- 交通工具就是汽车,轮船,飞机等等的高度抽象的概念.交通工具有行驶,载物等特性和方法
实例对象
某一类事物的具体表现,它是一系列拥有值的具体属性的集合.例如
- 小明是一个人,它属于人类的具体表现.他就拥有具体的身高,具体的姓名,具体的体重,他能够学习,玩游戏等行为.
- 我的自行车,它就是交通工具的具体表现.它有具体的重量,尺寸,它能载货等等行为
万事万物皆对象
所有拥有一系列属性以及对应值的集合就是对象.这种例子,在现实生活中数不胜数
- 冰箱拥有尺寸,重量,它能制冷,保险.所以冰箱就是一个对象.
- 电视拥有尺寸,重量,它能播放电视节目.所以冰箱也是一个对象
- 空气质量微乎其微,但是它有组成的部分,它能提供人们赖以生存的氧气等
javascript对象
在javascript中,对象就是实例对象.js对象的属性都会包裹在 {} 里,属性名和属性值以键值对的形式组合,属性和属性之间用逗号隔开. 以冰箱为例
{
尺寸: 50寸,
重量: 200,
价格: 900,
品牌: 奥玛
}
但是我们在编写程序的过程中,是不建议使用中文作为属性名或者变量名的.如果英文不够,你可以考虑用拼音来凑.所以以上例子我们应该改为
{
size: 50,
weight: 200,
price: 900,
brand: "奥玛冰箱"
}
javascript创建对象的方式
字面量方式创建
字面量方式是最为直观和简单的创建对象方式,我们可以一看就看出该对象里有哪些属性和方法
var obj = {
brand: "奥玛",//品牌
size: 60,//尺寸
price: 900,//价格
}
对象的访问方式
- 点语法,通过对象名.属性名的方式访问
var obj = { brand: "奥玛",//品牌 size: 60,//尺寸 price: 900,//价格 } console.log(obj.brand); //访问obj对象的brand属性 - 字符串语法,通过 对象名["属性名"]的方式访问
var obj = { brand: "奥玛",//品牌 size: 60,//尺寸 price: 900,//价格 } console.log(obj["brand"]); //访问obj对象的brand属性var obj = { brand: "奥玛",//品牌 size: 60,//尺寸 price: 900,//价格 } var name = obj.brand;//将对象的属性赋值给一个变量name //如果通过obj.name的方式访问,可到结果是undefined console.log(obj.name);//这句话的意思就是 访问 obj里的name属性,但是obj对象里,并没有一个叫name的属性,所以得到的结果是undefined; //字符串方式访问 console.log(obj[name]);//等价于 obj["brand"]
为对象添加新的属性
和访问值一样,也是两种一样的方式.
var obj = {
brand: "奥玛",//品牌
size: 60,//尺寸
price: 900,//价格
}
// 通过点语法,为obj对象新增一个耗能等级属性.
obj.level = 1;
console.log("访问obj的level属性"+obj.level);
// 通过字符串语法,为obj对象新增一个doors属性,表示有多少门
obj["doors"] = 3;
console.log(obj.doors); //3
- Object() 方法
var obj = new Object();
obj.name = "tomcat";
console.log(obj.name);
以上两种创建对象的方式是最简单方便的.但是这两种创建对象的方式在创建多个拥有同样属性的对象的时候,需要编写大量的重复代码,例如
// 冰箱拥有的属性是一样的
// 美的冰箱
var meidi = {
brand: "美的",//品牌
size: 60,//尺寸
price: 900,//价格
}
//奥玛冰箱
var aoma = {
brand: "奥玛",//品牌
size: 60,//尺寸
price: 900,//价格
}
工厂方法
所谓工厂,就是我们只需要告诉工厂,我们要什么,需要什么特点.然后工厂帮我们生产,生产完成之后再给我们一个成品.而工厂方法就是将创建对象的代码放到一个工厂方法里进行,通过调用工厂方法得到需要的对象.
工厂方法的出现是为了解决创建同类型对象产生大量代码的问题.
// 定义一个工厂方法
function 工厂方法名(形参列表){
var obj = new Object();
// 根据传递进来的实参,为obj设置相应的属性
//将创建好的对象返回给调用者
return obj;
}
声明一个创建冰箱的工厂方法
// 冰箱工厂方法
function FridgeFactory(brand,size,level){
var fridge = new Object();
fridge.brand = brand;
fridge.size = size;
fridge.level = level;
}
// 生产美的冰箱
var medi = FridgeFactory("meidi",50,1);
// 生产奥玛冰箱
var aoma = FridgeFactory("aoma",60,1);
以上示例,我们除了在声明工厂方法的时候,代码多一些外.无论我们创建多少个冰箱对象,都只需要很简单的一行代码即可.但这种方法依然会有一个问题,如果我们需要判断对象的类型.工厂方法是无法判断,例如我们用typeof,得到的结果都是object;
console.log(typeof medi); //object
因此我们需要一种可以判断对象类型的方法.
构造函数
构造函数和工厂方法都属于通过函数来创建对象.但是构造函数本身不回去创建对象,而是通过js提供的new方法来创建对象
function Fridge(brand,size,level){
this.brand = brand;
this.size = size;
this.level = level;
}
var medi = new Fridge("meidi",50,1);
var aoma = new Fridge("aoma",60,1);
this
在上面的构造函数中,出现this关键字.该this表示的是通过构造函数Fridge的实例本身.
function Fridge(brand,size,level){
//表示为创建出来的实例对象,设置brand属性,而属性的值就是通过
//new的时候调用构造函数传递进来的实际参数
this.brand = brand;
this.size = size;
this.level = level;
}
// this就表示是meidi对象
var meidi = new Fridge("meidi",50,1);
//this表示的是aoma对象
var aoma = new Fridge("aoma",60,1);
以上就是我们常用的创建对象的方式.由于学习进度的问题,还有两种主要创建对象方式,例如Object.create()和class的方式创建对象,我们学习到后面相关的知识点之后再去使用.
属性描述对象
目前为止,我们几乎可以对对象的属性为所欲为.我想改就改,我删除就删除.例如
var aoma = {
brand: "奥玛",//品牌
size: 60,//尺寸
price: 900,//价格
}
// 修改price的价格
aoma.price = 1024;
console.log(aoma);//aoma对象的价格发生了变化
// 给aoma对象新增一个属性
aoma.color = "lightgray";
console.log(aoma); //输出的对象内容了多了一个color
// 删除对象里的size属性
delete aoma.price; //把aoam对象里的价格删掉
console.log(aoma);//输出的结果少了一个price
从上面代码来看,我们真的几乎可以对aoma对象里属性做任何操作了.有些属性无所谓,但是有些属性却不能随意删除和修改.为了避免这种情况,我们可以通过以下的方式定义对象的属性.
Object.defineProperty
使用方式
Object.defineProperty(目标对象,"属性名称",描述对象)
目标对象: 你需要给哪个对象设置属性
属性名称: 给对象设置的属性名称
描述对象:
- 属性描述对象
- 属性存取描述对象
var aoma = {
size: 60,//尺寸
price: 900,//价格
}
// 给aoma对象设置一个品牌属性
Object.defineProperty(aoma,"brand",{
// 在这里对brand属性进行描述
})
属性描述对象
从名字上面看就知道该对象是对属性的描述.描述有以下内容:
- value,属性的值
- writable 可写描述.默认值为false,如果设置为false,则表示不能修改属性的值.
- configurable 可配置描述.默认值为false,如果为true,则表示可删除
- enumrable 可遍历,是否可以通过for循环进行遍历
var aoma = {
size: 60,//尺寸
price: 900,//价格
}
// 给aoma对象设置一个品牌属性
Object.defineProperty(aoma,"brand",{
// 在这里对brand属性进行描述
value: "奥玛",
writable: true,
configurable:true,
enumrable: true
})
console.log(aoma.brand); //输出结果 "奥玛"
aoma.brand = "美的";
console.log(aoma.brand);//品牌变成了 "美的"
delete aoma.brand;
consoel.log(aoma.brand);//brand又被删除了,所有输出结果是undefined
//遍历aoma对象里有哪些属性
for(var key in aoma){
console.log(key);
}
var aoma = {
size: 60,//尺寸
price: 900,//价格
}
// 给aoma对象设置一个品牌属性
Object.defineProperty(aoma,"brand",{
// 在这里对brand属性进行描述
value: "奥玛",
writable: false,
configurable:false,
enumrable: false
})
console.log(aoma.brand); //输出结果 "奥玛"
aoma.brand = "美的";//试图修改
console.log(aoma.brand);//输出结果依然是 "奥玛"
delete aoma.brand; //试图删除brand
consoel.log(aoma.brand);//删除失败,输出结果依然是美的
//遍历aoma对象里有哪些属性
for(var key in aoma){
console.log(key);//除了brand 其他属性都被遍历出来了
}
存取描述对象
当我们去访问对象的属性的时候,发生了什么?我们可以通过存取描述对象进行了解.从名字上来,我们就知道该对象涉及到的是属性的设置和获取.需要注意的是,存取描述对象和属性描述对象是不能同时存储在,否则报错.
存取描述对象里有两个属性
get方法.当我们访问对象属性的时候,实际上访问的就是系统提供的默认的get方法.但是我们可以通过在存取描述对象里重写这个方法,以达到我们想要的结果
set函数:当为对象的属性设置值的时候,就会触发该函数.同样我们也可以在属性描述对象里重写该对象
示例 访问对象的属性
var aoma = {
size: 60,//尺寸
price: 900,//价格
}
// 给aoma对象设置一个品牌属性
Object.defineProperty(aoma,"brand",{
// get方法必须通过return
get:function(){
console.log("当访问brand属性的时候,我会被处罚");
return "01奥玛"
}
})
console.log(aoma.brand);
/*
输出结果
1. 当访问brand属性的时候,我会被处罚
2. 01奥玛
*/
设置对象的属性
var aoma = {
size: 60,//尺寸
price: 900,//价格
}
// 给aoma对象设置一个品牌属性
Object.defineProperty(aoma,"brand",{
get:function(){
//由于brand是全局变量,所以可以将brand作为返回值
return brand;
},
// 当设置属性的值的时候,会访问set方法,设置的值,就是该函数的实参
set: function(value){
//定义一个全局变量,
brand=value;
//将设置的结果返回给对象的属性,然后通过get请求获取
return brand;
}
})
aoma.brand = "奥玛";
console.log(aoma.brand)
课堂练习
- 求出一个字符串里出现次数最多的字符. 提示 用字符作为key值,出现的次数作为value值.