对于很多初学JavaScript的小白来说,刚接触面向对象肯定是一脸懵逼的,博主也是一样.但经过一段时间的工作,还是对于面向对象有了一定的了解,下面就是这些天学习面向对象的一些心得与体会,希望对大家有所帮助.
什么是面向对象?
相信对于面向对象的一些概念大家在网上看的也都不少,什么学会了面向对象呀就能找对象之类的.好吧,言归正传,在JavaScript中,可以说所有东西都是对象,对象就是包含一组变量和函数的集合.函数是一个对象,数组是一个对象.而对于面向对象来说,我们把构成问题事务分解成各个对象,那么建立这些对象是为了描叙某个事物在整个解决问题的步骤中的行为,而不是为了完成一个步骤。
第一:如何创建对象
对象的每个属性或者方法都有一个名字,而每个名字都映射到一个值
如下面的对象:
例1:
var person = {
name: "王先生",
age:22,
sex:"男"
}
对于person(人)这个对象来说,每个人肯定是有名字的,有年龄,也有性别,也就是说person这个对象它有3个属性.
那么像这种 name:"王先生" , 属性名:属性值 , 我们就称之为键值对,一个键值对就是一个对象的属性.
那么有人就会问了,向刚刚上面的例子中,不管是name还是age都只是一个简单的数据类型,像"王先生"是字符串,22是数字,这个对象中能不能有一些更牛的属性呢,比如函数?答案是可以的.
对象中的属性不仅仅可以是一些简单数据类型,也可以是函数,也可以是对象.这里我要科普一下,哪些是简单数据类型呢?
简单数据类型在JS中就是5种,分别是:
1.数字类型 number;
2.布尔类型 boolean;
3.字符串类型 string;
4.undefined
5.null
除了以上5种数据类型,其他的所有元素的数据类型都是object类型
所以我们想给对象person中添加函数应该怎么做?这里你可以理解为函数也只是我们给对象中添加的一个属性而已,所以用法也和添加简单数据类型一样.
如,我要给person添加一个eat函数:
例2:
var person = {
name: "王先生",
age:22,
sex:"男",
eat:function(){
alert("王先生爱吃");
}
}
这里要提醒的一点是,对象中各个属性直接是用逗号来隔开的,而不是分号.
第二:如何访问对象中的属性
如果我们现在想访问例2中的name属性,可以这样写:
对象名.属性名
console.log(person.name);
另外也可以直接调用对象中的方法(函数):
person.eat(); //既然是调用方法(函数) 则一定还要添加()来表示方法的调用
也可以这样写:
对象名[属性名]
console.log(person["name"])
俩种方式都可以使我们访问到对象中的属性,但也有一定的区别:
对象名.属性名只适合知道了属性的名字时使用,如果一个属性名是个变量则会出现语法错误;
对象名[属性名]就没有限制了,不过当变量名是字符串常量,我们就要用" "引号引起来,是变量的话则可以直接使用
person,age = 22;
var a = 'age';
console.log(person[a])
=>22
第三:如何修改对象中的属性
修改对象中的属性其实很简单,只需要获取到你想修改的对象的属性,然后给它重新赋值就可以了;
比如修改例2中的sex属性和eat属性:
person.sex = "女"
person.eat=function(){
alert("王先生不爱吃");
}
第四:如何给对象添加属性
上面我们了解到了怎么访问对象属性,修改对象属性,那么现在想给对象中添加属性应该怎么做呢?
比如我现在还是想给例3中的person添加一个属性hobby和play;
例3:
var person = {
name: "王先生",
age:22,
sex:"男",
eat:function(){
alert("王先生爱吃");
}
}
person.hobby="yun";
person.favorite=function(){
alert(this.name+"favorite is"+this.hobby);
}
第五:如何删除对象中的属性
删除对象中属性这里我们要用到一个操作符:delete;
如我要删除例3中person的年龄属性:
delete person.age;
//此时我们再执行
console.log(person.age)
=>undefined //返回的是undefined ,说明age这个属性被删除了
第六:如何遍历对象
针对遍历对象,可以有俩种变量对象的方式
1.通过for(...in...)来变量对象的各个属性名称
for(var proName in p){ //var 可以省略 in前面表示的是p对象的属性名称
console.log(proName); //在此输出的只是p对象的各个属性名称
}
for(var proName in p){
console.log(p[proName]) //在此输出的是p对象的各个属性的值
}
2.通过for(...of...)来变量对象的各个属性的值
for(var pro of p){
console.log(pro); //在此输出的是p对象的各个属性的值
}
解析面向对象的几种创建方式
上面我们只是简单的用
var 对象名 = { 属性名:属性值, 属性名:属性值, }
来创建一个对象,这种方式称为字面量的创建方式,其实还有另外几种创建对象的方式.
3.1 使用new Object( )
var p = new Object();
p.name = "小王",
p.eat = function(){
alert('函数')
}
3.2 工厂模式创建
function createP(name,age,sex){
var p = new Object();
p.name = name;
p.age = age;
p.sex = sex;
return p;
}
var p1 = createP("小王","22","男");
var p2 = createP("小张","23","女");
createPerson()函数可以多次调用，每调用一次这个函数就会返回一个对象，而且对象的类型仍然是Object类型的。虽然解决了多个相似对象的问题，但却没有解决对象类型识别的问题。
3.3 构造函数创建
为了解决对象类型识别问题，又提出了构造函数模式。
通俗来说,就是用 new 的方式来调用函数的时候,就是构造函数. 如: var p = new person();
这种模式，其实在我们创建一些原生对象的时候，比如Array、Object都是调用的他们的构造函数。
构造函数的使用:
1.首先创建一个对象,这个对象的类型就是构造函数的名字
如例1中的p1就是创建的对象,这个对象的类型就是createP
2.最后会把创建这个对象自动的返回,所以不需要return
3.为什么使用构造函数:实际是给创建对象的一个初始化
4.函数作为构造函数使用时,this指代的是创建的这个对象;函数作为正常调用时,this代指window
例1:
function createP(name,age,sex){
this.name = name; //在构造函数中,this就是指代创建这个对象
this.age = age;
this.sex = sex;
}
var p1 = new createP("小王","22","男"); //使用new的方式来调用函数的时候,这个时候,这样的函数就叫构造函数
var p2 = new createP("小张","23","女");
构造函数与普通函数的区别
上面我们在创建对象的时候用了一种通过构造函数创建的方式,那么构造函数与普通函数有什么区别呢?
他们的调用方式不同:
构造函数: new 函数( )
默认返回创建的那个对象
所有单词首字母大写
普通函数: 函数( )
默认返回undefined
网友评论