函数和对象的创建以及面向对象的编程
2017-02-25 本文已影响0人
码农的世界你不懂
-
函数的创建方式:
① 函数声明
② 函数表达式
③ 使用Function类型的构造器创建
代码示例
//01 函数声明
function functionName() {
console.log('以函数声明的方式来定义函数');
}
functionName();
//02 函数表达式
var func = function () {
console.log('函数表达式的方式来定义函数');
};
func();
//03 使用Function构造器来创建
var funcName = new Function();
funcName();
//上面的代码等价于
/*
function funcName() {
}
*/
关键字new的使用
可以使用new关键字来创建新的对象
———————————————————————————————————————
-
可以使用new关键字来创建新的对象
-
01 面向过程和面向对象编程
-
1 面向对象编程和面向过程编程是一种编程思想,和具体的语言关系不大。
-
02 面向过程编程和面向对象编程的主要区别
-
面向过程编程:
关注点在于解决问题需要的每一个详细的步骤
示例:
自己洗衣服的过程
① 收集需要洗的脏衣服
② 准备洗衣粉、洗衣液等
③ 把衣服放到一个盆里
④ 接水
⑤ 把洗衣粉放到盆里
⑥ 摩擦,摩擦,不断的摩擦
⑦ 把洗好的衣服用清水冲洗干净
⑧ 尽量把把洗好的衣服的水分拧干
⑨ 晾晒
面向对象编程:
关注点在于解决问题需要的对象身上
示例:
使用洗衣机洗衣服的过程
① 收集需要洗的脏衣服
② 找到合适的洗衣机
③ 设定洗衣服和烘干的程序
-
03 面向过程和面向对象他们的区别就类似于自己洗衣服和使用洗衣机洗衣服|自己做饭吃和去餐馆吃饭
-
面向对象编程的相关概念
- 01 对象
- 什么是对象? 所有的一切都是对象,在开发中有一项重要的工作就是对象的划分
一般来说,我们所指的对象是某个具体的事物,而非泛泛的类别
- 什么是对象? 所有的一切都是对象,在开发中有一项重要的工作就是对象的划分
- 02 对象的特征(静态描述信息)
- 所谓特征就是一些特定的描述信息
如:学生(性别、年龄、班级、专业、籍贯、家庭住址)
如:汽车(颜色、车牌、品牌、价格等)
- 所谓特征就是一些特定的描述信息
- 03 对象的行为(动态特性)
- 如:人(吃饭、睡觉、玩游戏、奔跑、运动等)
如:狗(吃、睡、咬人、叫、流口水)
- 如:人(吃饭、睡觉、玩游戏、奔跑、运动等)
- 04 js中的对象
- 键-值对(key-value)的集合。
- 05 现实生活中的对象和js对象的对应关系
- 静态的描述信息 - js对象中的属性(属性就是定义在对象内部的变量)
动态的行为特征 - js对象中的方法(方法就是定义在对象内部的函数)
- 静态的描述信息 - js对象中的属性(属性就是定义在对象内部的变量)
- 01 对象
** 06 代码示例:**
var zhangsan = {
name:"张三",
sex:"男",
age:18,
address:"天上人间1号公馆",
eat:function () {
console.log('能吃');
},
sleep:function () {
console.log("能睡");
},
say:function () {
console.log("能说话");
},
run:function () {
console.log("能运动");
},
song:function () {
console.log("能唱歌");
}
};
//打印对象的属性并调用相关的方法
console.log(zhangsan.name,zhangsan.age,zhangsan.address);
zhangsan.say();
zhangsan.sleep();
```
_______________________________________________________________________
**为什么要使用面向对象编程?**
` *面向对象编程的优点: 更方便 + 提高代码的复用性*`
##### 典型的面向过程
```
<script>
//01 创建标签
var div = document.createElement("div");
//02 设置样式
div.style.width = "200px";
div.style.height = "50px";
div.style.backgroundColor = "red";
//03 添加到页面上
document.body.appendChild(div);
</script>
```
##### 面向对象的代码
```
<script>
// $("body").append("<div>sdshdfskfsk</div>")
$("body").append("<div style='height: 200px;width: 100px;border: 2px solid #2aa198'></div>");
</script>
```
**总结:面向对象编程其实是对面向过程的封装**