认识面向对象:
/*
五点
1, 发展历史
2, 编程思想
面向过程的编程思想: 只关心数学逻辑.
面向对象的编程思想: 直接生活逻辑映射到我们的程序中.
3, 语法
类 对象
类: 具有一类相同特征的事物的抽象概念.
对象: 具体的某一个实体, 唯一的.
4, 代码
5, 结构
基本数据类型 (单个数据) -> 数组 (批量数据) -> 对象 (既能够存储数据, 又能够存储函数)
*/
我们想创建两个对象, 利用传统的对象方式:
- <script>
- /*
- [注] 面向对象的特点是继承, 封装, 多态.
- */
- var person1 = new Object();
- person1.name = 'blue';
- person1.sex = "男";
- person1.showName = function(){
- alert("我的名字叫" + this.name);
- }
- person1.showSex = function(){
- alert('我是' + this.sex + "的");
- }
- person1.showName();
- person1.showSex();
- /*
- 重复代码太多, 封装函数.
- */
- var person2 = new Object();
- person2.name = 'red';
- person2.sex = "女";
- person2.showName = function(){
- alert("我的名字叫" + this.name);
- }
- person2.showSex = function(){
- alert('我是' + this.sex + "的");
- }
- person2.showName();
- person2.showSex();
- </script>
- View Code
上面重复代太多, 必须加以改进 (利用封装函数):
这种方式叫做工厂方法 \ 函数
- <script>
- /*
- 工厂方式
- 1, 原料
- 2, 加工
- 3, 出厂
- 下述方法, 叫做工厂方法 / 工厂函数.
- [注] 设计思想: 工厂模式.
- */
- function createPerson(name, sex){
- //1, 原料
- var person = new Object();
- //2, 加工
- person.name = name;
- person.sex = sex;
- person.showName = function(){
- alert("我的名字叫" + this.name);
- }
- person.showSex = function(){
- alert('我是' + this.sex + "的");
- }
- //3, 出厂
- return person;
- }
- var person1 = createPerson("blue", "男");
- person1.showName();
- person1.showSex();
- var person2 = createPerson("red", "女");
- person2.showName();
- person2.showSex();
- alert(person1.showName == person2.showName); //false
- </script>
- /*
- 工厂函数和系统创建对象的形式有啥区别?
- 1, 没有 new
- 2, 每一个对象都有一套自己的函数, 浪费.
- */
- View Code
- /*
- 工厂函数和系统创建对象的形式有啥区别?
- 1, 没有 new
- 2, 每一个对象都有一套自己的函数, 浪费.
- */
来看一下系统是怎么创建对象的:
- <script>
- // 系统创建对象的方式
- var arr = new Array();
- var d = new Date();
- var obj = new Object();
- /*alert(typeof Array); //function
- alert(typeof Date); //function*/
- var arr1 = [1, 2, 3];
- var arr2 = [6, 7, 8];
- alert(arr1.push == arr2.push); //true
- /*
- 1, 系统创建对象的函数, 前面调用的时候加 new
- 2, 创建出来对象, 共用的是一套函数.
- */
- </script>
- View Code
- /*
- 1, 系统创建对象的函数, 前面调用的时候加 new
- 2, 创建出来对象, 共用的是一套函数.
- */
怎么才能让我们 (自定义创建对象) 创建的对象也 可以用 new 调用和公用一套函数呢?
这里就用到构造函数:
- // 构造函数
- /*
- 工厂方式
- 1, 原料
- 2, 加工
- 3, 出厂
- 下述方法, 叫做工厂方法 / 工厂函数.
- [注] 设计思想: 工厂模式.
- [注] 我们通过 new 去调用的函数叫做构造函数, 所谓构造函数就是去创建对象的.
- [注] 为了区分构造函数, 和普通函数, 一般情况下, 构造函数的首字母大写.
- [注] 如果在调用函数的前面加了 new
- 1, 自动完成原料 和 出厂操作
- 2, 该函数中的 this, 指向新创建出来的对象.
- [注]JavaScript 中是用构造函数替代类的功能.
- */
- <script>
- // 构造函数
- /*
- 工厂方式
- 1, 原料
- 2, 加工
- 3, 出厂
- 下述方法, 叫做工厂方法 / 工厂函数.
- [注] 设计思想: 工厂模式.
- [注] 我们通过 new 去调用的函数叫做构造函数, 所谓构造函数就是去创建对象的.
- [注] 为了区分构造函数, 和普通函数, 一般情况下, 构造函数的首字母大写.
- [注] 如果在调用函数的前面加了 new
- 1, 自动完成原料 和 出厂操作
- 2, 该函数中的 this, 指向新创建出来的对象.
- [注]JavaScript 中是用构造函数替代类的功能.
- */
- function CreatePerson(name, sex){
- //1, 原料
- // var person = new Object();
- // this = new Object()
- //2, 加工
- this.name = name;
- this.sex = sex;
- this.showName = function(){
- alert("我的名字叫" + this.name);
- }
- this.showSex = function(){
- alert('我是' + this.sex + "的");
- }
- //3, 出厂
- // return person;
- //return this;
- }
- var person1 = new CreatePerson("blue", "男");
- person1.showName();
- person1.showSex();
- var person2 = new CreatePerson("red", "女");
- person2.showName();
- person2.showSex();
- alert(person1.showName == person2.showName); //false
- /*
- 工厂函数和系统创建对象的形式有啥区别?
- 1, 没有 new
- 2, 每一个对象都有一套自己的函数, 浪费.
- */
- </script>
- View Code
现在可以用 new 调用了, 但是每一个对象还是都有一套自己的函数 (对象方法 \ 函数), 要想用让每个对象都公用一套对象的方法 \ 函数. 就要用到 prototype 原型来 定义对象方法 \ 函数.
先来看一下小例子, 给数组对象直接给对象添加对象方法 \ 函数 的方法行不行;
- /*
- prototype 原型
- */
- var arr1 = [10, 20, 30, 40];
- var arr2 = [60, 70, 80, 90];
- // 求和函数
- arr1.sum = function(){
- var res = 0;
- for(var i = 0; i <this.length; i++){
- res += this[i];
- }
- return res;
- }
- alert(arr1.sum());
- alert(arr2.sum()); // arr2.sum is not a function
- View Code
可见不行, 下面我们用 prototype 原型给数组对象添加对象方法 \ 函数.
- <script>
- /*
- prototype 原型 2
- */
- var arr1 = [10, 20, 30, 40];
- var arr2 = [60, 70, 80, 90];
- // 求和函数
- /*arr1.sum = function(){
- var res = 0;
- for(var i = 0; i <this.length; i++){
- res += this[i];
- }
- return res;
- }*/
- /*
- [注] 如果你想给一类对象添加函数, 那么我们可以通过 prototype 原型将函数添加在构造函数上.
- */
- Array.prototype.sum = function(){
- var res = 0;
- for(var i = 0; i <this.length; i++){
- res += this[i];
- }
- return res;
- }
- alert(arr1.sum());
- alert(arr2.sum()); // arr2.sum is not a function
- alert(arr1.sum == arr2.sum); //true
- </script>
- View Code
经过上面的给数组对象添加求和的方法. 就可以这样给构造函数添加 对象方法 \ 函数了.
构造函数的标准写法:
- <script>
- function CreatePerson(name, sex){
- // 添加属性
- this.name = name;
- this.sex = sex;
- }
- // 函数要通过原型 prototype 添加
- // 添加函数
- CreatePerson.prototype.showName = function(){
- alert("我的名字叫" + this.name);
- }
- CreatePerson.prototype.showSex = function(){
- alert('我是' + this.sex + "的");
- }
- var person1 = new CreatePerson("blue", "男");
- var person2 = new CreatePerson('red', "女");
- person1.showName();
- person1.showSex();
- person2.showName();
- person2.showSex();
- alert(person1.showName == person2.showName); //true
- </script>
- View Code
来源: http://www.bubuko.com/infodetail-2772126.html