Javascript面向对象

来源：互联网发布：淘宝女装店铺头像图片编辑：程序博客网时间：2024/06/05 19:24

JS面向对象：【Oriented Object】

1.什么是面向对象？

面向对象不是一门技术，而是一种处理问题的思路，一种编程思想，是对传统面向过程编程的一种补充和完善。

面向对象，是将程序中的数据和功能进行封装，通过面向对象的三大特征封装、继承、多态以达到代码复用性、低耦合、增强代码功能扩展。

2.什么是类和对象？（面向对像的核心：类和对象）

类：类型的简称，就是一个代号，一种数据类型的描述，说白了，类是对象抽象出来的概念。

对象：就是类型的某一个具体的实体，一个具体已经存在实际的物体，对象是类型指代的具体存在的某一个物体。

3.特点

1.对零散数据的封装，方便对数据进行统一的管理和支配，避免了零散数据可能出现的数据污染；

2.提高了代码的复用性（重复使用的特性）

3.降低代码的耦合性（依赖性），提高代码的健壮性；

4.提高项目的扩展性（软件开发的OCP原则：开闭原则）

1.构造函数

构造函数：专门用于被创建对象的函数，函数本身定义一个自定义数据类型，内部通过this来定义各种类型的属性和行为。

<span style="font-size:24px;">function Person(name, age) {  　　this.name = name;  　　this.age = age;  　　this.run = function() {       console.log(“锻炼身体”); }  }</span>

构造函数，和new关键字结合起来创建对象

<span>var _obj = new Person(“tom”, 48);</span>

通过对象的引用变量，可以调用对象的属性和行为

<span>console.log(_obj.name);//调用对象的属性  _obj.run()// 调用对象的函数</span>

2.构造函数的原型prototype

每个构造函数都会有一个原型对象prototype

prototype：原型对象，用于给构造函数添加对象公共使用的属性和方法，优化程序！

添加公共属性：

<span>Person.prototype.species = “人类”;</span>

添加公共函数：

<span>Person.prototype.play = function() {console.log(“正在游戏”);}</span>

通过Person这个构造函数创建的对象，都默认拥有species属性和play()函数操作

原生JS中的String、Array等内置对象，就是通过这样的方法进行方法扩展的！

3.面向对象的封装

（1）在JS中，对于面向对象的争议已经存在很长的时间，不可否认的是面向对象确实是适合项目复杂度较高的情况，更加有利于项目的高效开发和扩展。

（2）所以原生JS中通过构造函数进行面向对象的模拟实现，但是在ES6中JS已经启用了关键字class以及和面向对象相关的一系列的使用方式。

（3）目前在原生JS中对于对象的封装遵循以下的方式：

通过分析之后抽取出来的构造函数中，只定义属性

<span>function Person(name, age, gender) {  　　this.name = name;  　　this.age = age;  　　this.gender = gender;  }</span>

通过分析之后抽取出来的函数操作，尽量都使用构造函数的prototype来进行定义

<span>Person.prototype.eat = function() { // TODO }  Person.prototype.sleep = function() { // TODO }  Person.prototype.play = function() { // TODO }</span>

常规情况下，对于对象的封装，一是将属性封装在构造函数的内部。二是将行为定义到构造函数的prototype上面

var Person = function(name, age) {           // 构造函数中只封装属性           this.name = name;           this.age = age;       }       Person.prototype.run = function() {};       Person.prototype.sleep = function() {};       Person.prototype.play = function() {};        /* prototype 的使用 */       Array.prototype.getMax = function() {           var _max = this[0];           for(var i = 0; i < this.length; i++) {               if(this[i] > _max) {                   _max = this[i];               }           }           return _max;       }       var _arr = [1,3,4,2,21,4,65,6,2,4];       /*console.log(Math.max(1,3,4,2,21,4,65,6,2,4));       console.log(Math.max.apply(null, _arr));*/       console.log(_arr.getMax());    </script>

4.继承继承：通过子类继承父类实现父类中代码的重复利用！

  <span style="font-size:18px;">     var People = function(name) {          this.name = name;          this.eat = function() {                           // 吃饭，每个对象不一样              console.log(this.name + "吃饭了.....");          }          /*this.run = function() {                       // 跑步，每个对象都一样              console.log("跑步锻炼");          }*/      }      People.prototype.job = "检察官";                    //定义公共属性      People.prototype.run = function() {                  // 定义公共函数          console.log("跑步锻炼........");      }        var tom = new People("tom");      var jerry = new People("jerry");        /*console.log(tom.job);      tom.eat();                                 //直接调用eat（）      tom.run();                                   //直接调用run（）                        console.log(jerry.job);      jerry.eat();      jerry.run();*/      console.log(tom, jerry);    </script>

继承的第一种方式：通过apply/call实现假继承
apply/call方法都是通过改变函数中第一个参数的指向来达到扩展代码功能的目的

var _extends = function(Child, Parent) {
var F = function() {};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
}
var Animal = function(name,age) {
this.name = name;
this.age = age;
}
Animal.prototype.play = function() {console.log("play gaming!");}
var Cat = function(name, age, color) {
this.color = color;
}
_extends(Cat, Animal);
var cat = new Cat();
console.log(cat);

var Animal = function(name, color) {              this.name = name;              this.color = color;          }          Animal.prototype.eat = function() {console.log("吃肉");}            var Cat = function(name, color, age, type) {              // Animal.apply(this, [name, color]);              Animal.call(this, name, color);              this.age = age;              this.type = type;          }          Cat.prototype.caches = function() {console.log("抓老鼠..");}            var cat = new Cat("tom", "黑色", 48, "猫科");          console.log(cat);

继承的第二种方式：通过prototype和空对象进行间接继承

var _extends = function(Child, Parent) {             var F = function() {};             F.prototype = Parent.prototype;             Child.prototype = new F();             Child.prototype.constructor = Child;         }           var Animal = function(name,age) {             this.name = name;             this.age = age;         }         Animal.prototype.play = function() {console.log("play gaming!");}           var Cat = function(name, age, color) {             this.color = color;         }           _extends(Cat, Animal);           var cat = new Cat();         console.log(cat);

0 0