JS面向对象编程

一、什么是面向对象思想(编程思想角度)？

   现有的两种程序思想：面向过程和面向对象

1.面向过程： 关注的是解决问题的步骤；

      ①优点：在小型程序中代码量比较少，开发成本低

      ②缺点：在构建大型项目时，代码逻辑不易捋顺，代码量大，增加开发难度。

2.面向过程：关注的是解决问题所需要的对象；

      ①优点：有效弥补了面向过程编程思想的不足

      ②缺点：在小型程序中不如面向过程思想灵活、方便

二、什么是面向对象语言（编程语言角度）？

 面向对象的编程语言，必须有“类”和“对象”这两个概念。并且对象是经由类创建出来的；还需要有封装、继承、多态三个特征（如：Java语言）

js和面向对象的关系：

      js不符合以上条件，但是有“对象”的概念，所以说js是一门基于对象的编程语言，利用面向对象编程思想来指导js代码的书写方式。

三、js如何创建对象？

1.通过字面量的方式创建

//创建一个对象 包含name、age属性 和sayHi方法

   var per = {

         name :'xiaoWang',

         age:18,

         sayHi: function(){

                alert('hello');

          }

};

//访问对象的属性

alert(per['name']);

per.sayHi();

>>优势：快捷、直观、方便

>>劣势：需要创建多个对象时，代码冗

余

2.工厂模式创建对象：通过调用工厂，给工厂传递参数，则该工厂就能批量生产对应的产品。

//  定义创建对象的工厂

function creatPerson(name, age) {

// 创建空对象

var per = {};

// 给空对象添加属性和方法

    per.name = name;

    per.age = age;

    per.sayHi = function () {

          alert(name +'hello')

     }

// 把创建的对象返回出去

return per;

}

var per1 = creatPerson('xiaoWang', 23);

console.log(per1)；

//可以通过instanceof 方法判断实例的类型

console.log(per1 instanceof creatPerson);

>>优势：解决了了代码冗余的问题；

>>劣势：无法区分该对象的类型（如：

系统类型，如number是Number（）创建的，但是自定义类型无法获取到）

3.通过构造函数创建对象（函数名首字母大写）

function CreatePreson(name, age) {

// 把所有的属性和方法挂载在this指针上。将来this指向谁，这些属性和方法就添加在谁身上

    this.name = name;

    this.age = age;

    this.sayHi = function () {

        alert(this.name + 'hello');

    };

}

//  调用构造函数创建对象

//  new + 构造函数名

//  new：通过new关键字调用的函数，new会首先在内存中开辟一块存储空间，然后把构造函数中的this指针指向这块存储空间，这样给this指针绑定的属性、方法，也就添加进了这块存储空间中。最后把存储空间的地址给per对象保存

//  通过构造函数创建出来的对象可以借助相关方法判断归属关系。

var per1 = new CreatePreson('xiaoXuan', 18);

per1.sayHi();

console.log(per1 instanceof CreatePreson);

>>优势：解决了了获取对象类型的问题，使用构造函数创建的对象自带一个constructor,通过该属性获取对象的类型(还可以使⽤用instanceof检测对象是那个一个类型的实例例：(personinstanceof Person),返回一个布尔值 ）

>>劣势：内存占用有点大

总结 ：

1.工厂模式和构造函数创建对象的区别：

①在函数中没有显式的创建新对象；

②直接把属性、方法赋值给了了this指针；

③没有return语句

④使用构造函数创建出来的对象可以标识这个对象属于哪一种类型

2.普通函数调用和构造函数调用的区别：

必须使用new操作符来创建新对象，如果像调用普通函数那样创建对象，就是在全局作用域中调用函数了，this指针会指向window对象

四、如何使用对象？

1.点语法和[ ]访问某一个属性

方法一：对象名+'.'+属性名

例：alert(per.name); 

方法二：对象名+[  ]+属性名字符串

alert(per['name']);

2.删除属性

delete per2.name;

小练习

定义一个求平方的对象，输入一个数字，输出这个数字的平方值

//通过字面量创建对象

var res = {

 num: 3,

 getRes:function(){

return res.num*res.num;

 }

 };

 alert(res.getRes());

//通过工厂方法创建对象

function getRes(num){

 var res = {};

 res.num = num;

 res.getRes1 = function(){

 return num*num;

}

 return res;

}

 var res1 = getRes(3);

 alert(res1.getRes1());

//通过构造函数方法创建对象

function GetRes(num){

this.num = num;

this.getRes = function(){

return num*num;

}

}

var res1 = new GetRes(7);

alert(res1.getRes());