面向对象
第一章:简介
就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。
生活中的的例子举例。
第二章:对象的属性
2.1 访问对象的属性
<script type="text/javascript">
//用大括号括起来的一系列的键值对，就构成了JavaScript对象。这种对象称之为字面量对象。
var person = {
name : "张三", // 一个键值对
age : 20,
sex : "男",
girls: ["小红","小丽"]
eat : function () { //属性的值是函数，这个时候我们更喜欢把这样的属性称之为方法。
alert("吃东西");
}
}
</script>
一:
通过: 对象.属性
对象的属性只能是常量,不可是变量
例1:
var name = person.name //将对象person的name属性的值赋值给变量 name ;
alert(name);
=>张三
person.eat(); //调用函数时记得加上();
二:
通过 对象[属性]
对象的属性可以是变量也可以是常量,若是常量,则用" "或者' '括起来,若是变量,则直接使用
例2:
var name = person["name"]; //访问字符串常量
var n = "age";
var age = person[n]; //访问变量
2.2 给对象添加属性
//给person对象的属性 sex 赋值。在赋值的过程中，首先会判断这个属性在JavaScript中是否存在，如果存在就对这个
//属性重写赋值。如果不存在，就给这个对象添加这个属性，并赋值。
person.sex = "男";
person.play = function(){
alert('添加了新的属性,play函数');
}
2.3 删除对象属性
使用操作符: delete
操作符后面不用加( )
例1:
delete person.age; //使用delete操作符,删除对象的属性age;
alert(person.age) //弹出undefined,表示这个属性没有定义.
例2:
alert(delete person.age) //弹出true,表示这个属性可以删除,并且执行了delete
alert(person.age) //弹出undefined,表示这个属性没有定义.
2.4 修改对象属性
person.sex = "女"; //将person对象的属性sex修改为"女"
person.eat=function(){ //因为函数也是对象中的一个属性,所有也可以修改
alert("我是新修改的eat函数");
}
person.eat();
=> 我是新修改的eat函数
2.5 遍历对象
for(... in ...)
使用for in 遍历的是p对象各个属性名称
for(var proName in p){ //var 可以省略 in前面表示的是p对象的属性名称
console.log(proName); //在此输出的只是p对象的各个属性名称
}
for(var proName in p){
console.log(p[proName]) //在此输出的是p对象的各个属性的值
}
for(... of ...)
使用for of 遍历的是p对象各个属性的值
for(var pro of p){
console.log(pro); //在此输出的是p对象的各个属性的值
}
第三章: 面向对象的创建
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","女");
typeof只能测试出:
-
number 2. string 3. boolean 4. undefined 5.function
除了以上5种,剩下的所有测试出来的都是object
instanceof 用以检测对象的类型是不是我们想要的
例2:
var p1 = new createP("小王","22","男");
alert(p1 instanceof createP);
=> true
例3:
设计一个构造函数,利用这个构造函数能初始化对象,这个对象确定一个平面的点
对象内应该提供一个方法,这个方法能计算俩个点之间的距离
function Point(x,y){
this.x = x;
this.y = y;
this.distance=function(other){
return Math.sqrt(Math(this.x-other.x,2)+Math(this.y-other.y,2));
}
}
var p1 = Point(10,20);
var p2 = Point(20.30);
console.log(p1.distance(p2));
=> 14.142......
例4:
设计一个构造函数,利用这个构造函数能初始化对象,对象确定一个有圆心的圆
对象内应提供方法:1.计算圆的周长 2.计算圆的面积 3.计算圆心与圆心之间的距离
/**
*定义一个创建圆的构造函数
*point 圆心的坐标,实际是一个对象
*r 圆的半径
**/
function Circle(point,r){
this.point = point;
this.r = r;
//定义计算周长的函数
this.perimeter = function(){
return Math.PI*2*this.r;
}
//定义计算面积的函数
this.area = function(){
return Math.PI*Math.pow(this.r,2);
}
//定义计算圆心距离的函数
this.circleDistance = function(other){
return this.point.distance(other.point); //引用point这个对象中的distance方法
}
}
//引用例3中的构造函数,获得俩个圆的圆心
var point1 = new Point(10,20);
var point2 = new Point(20,30);
//引用构造函数确定圆
var circle1 = new Circle(point1,10);
var circle2 = new Circle(point2,10);
console.log(circle1.circleDistance(circle2));
例5:
创建一个构造函数,用来初始化对象,这个对象能确定书本的信息,包过:1.书本名 2.作者 3.出版社 4.出版日期 5.出版至今多久
对象中应提供的方法:
1.用以显示书本的信息到页面上
2.用以获取书本的信息
3.用以计算出版至今多久
function Book(bookName,author,press,datePublication){
this.bookName = bookName;
this.author = author;
this.press = press;
this.datePublication = datePublication;
//用以显示信息的函数
//传入的参数div 用来在页面中显示出来
this.showMsg = function (div) {
div.innerHTML = this.getMsg(); //调用getMsg()函数
};
//用以获取信息的函数
this.getMsg=function(){
return "书名:"+this.bookName+"<br>"+"作者:"+this.author+"<br>"+"出版社:"+this.press+"<br>"+"出版日期"+this.datePublication.toLocaleString()+"<br>"+"出版至今已:"+this.howDate(new Date())+"天"
}
//用以计算出版时间至今多久
this.howDate=function(nowTime){
var d = nowTime.getTime()-this.datePublication.getTime();//使用getTime()将现在的时间和出版的时间都转换为毫秒
return Math.floor(d/(24*3600*1000));
}
}
var book1 = new Book("正太的修养之路","王先生","东莞",new Date(2017,3,4)); //注:月份是从0到1开始的
console.log(book1);
book1.showMsg(document.body.appendChild(document.createElement('div')));
**注:严格模式 "use strict" **
3.4 构造函数与普通函数的区别
1.调用方式不同:
构造函数: new 函数( )
默认返回创建的那个对象
所有单词首字母大写
普通函数: 函数( )
默认返回undefined
网友评论