简述JS中的面向对象编程

简述JS中的面向对象编程

背景介绍

在 JavaScript 中，大多数事物都是对象, 从作为核心功能的字符串和数组，到建立在 JavaScript 之上的浏览器
API。你甚至可以自己创建对象，将相关的函数和变量封装打包成便捷的数据容器。理解这种面向对象(object-oriented, OO) 的特性对于进一步学习 JavaScript
语言知识是必不可少的。这个模块将帮助你了解“对象”，先详细介绍对象的设计思想和语法，再说明如何创建对象。

知识剖析

然后，所谓面向对象编程，我觉得主要有以下几个知识点

1.理解对象以及访问对象的两种表示法
2.'this'的含义
3.面向对象的程序设计
4.构造函数和对象实例
5.原型链
6.prototype 属性
7.constructor 属性
8.原型式继承

那什么是对象呢？

对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）。我们来看一个例子：

var person = {
    name: ['Bob', 'Smith'],
    age: 32,
    gender: 'male',
    interests: ['music', 'skiing'],
    bio: function () {
        alert(this.name[0] + ' ' + this.name[1]+ ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1]+ '.');
    },
    greeting: function () {
        alert('Hi! I\'m ' + this.name[0]+ '.');
    }
};

这就是一个典型的对象的例子，作为一个人，具有姓名，年龄，性别，爱好等等属性，而且有各种方法，会打招呼(greeting())，会做饭。

而我们想要访问到这个属性的话，就要用到点表示法，person.age.调用方法，也是同样,person.greeting();即可

我们来看一下括号表示法和点表示法的区别

function append() {
    var attr=$("#name").val();
    var num=$("#value").val();
   person[attr]=num;
    console.log(person);
}

 

我们通过括号表示法，可以给对象添加新的key和value,

继续添加

我们就添加了键值对的名字，这是点表示法做不到的，点表示法不能使用变量作为属性名。

2.this的指向

在对象里，关键字"this"指向了当前代码运行时的对象，比如上面这个代码，this实际上指向了当前的对象。所以当我们调用这个方法的时候，greeting()

greeting: function (){
    alert('Hi! I\'m ' + this.name[0] + '.');
}

会弹出当前对象的名字

3．面向对象的程序设计

最基本的 OOP 思想就是我们想要在我们的程序中使用对象来表示现实世界模型,并提供一个简单的方式来访问它的功能,否则很难甚至不能实现.

对象可以包含相关的数据和代码,这些代表现实世界模型的一些信息或者功能,或者它特有的一些行为.对于一个人（person）来说，我们能在他们身上获取到很多信息（他们的住址，身高，鞋码，基因图谱，护照信息，显著的性格特征等等），然而，我们仅仅需要他们的名字，年龄，性别，兴趣这些信息，然后，我们会基于他们的这些信息写一个简短的介绍关于他们自己，在最后我们还需要教会他们打招呼。以上的方式被称为抽象-为了我们编程的目标而利用事物的一些重要特性去把复杂的事物简单化

比如对于人这个类来说，它具有各种基本属性和方法，人与人之间的区别只是属性的值不一样，这样我们就简单构造了一个类来描述真实的世界。

  对于前端来说，我们在javaScript里用构造函数来实现面向对象编程。废话不多说，来看一个例子吧。

 function Person(first, last, age, gender,interests) {
    this.name = {
        first,
        last
    };
    this.age = age;
    this.gender = gender;
    this.interests = interests;
}

我们首先定义了一个类别为人的构造函数，当我们想要描述一个人的时候，给他传进去参数就可以了，比如

var person1=new Person('Chris','Martin',32,'male',['music','guitar']);

我们首先定义了Christ Martin，

再定义一个人

var person2=new Person('Gwyneth','Paltrow','35','female',['ironman','movie'])

 

是不是很方便快捷。

4.原型链

JavaScript 常被描述为一种基于原型的语言 (prototype-based
language)——每个对象拥有一个原型对象，对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链 (prototype
chain)，它解释了为何一个对象会拥有定义在其他对象中的属性和方法。

比如当我们调用person1.valueOf方法的时候，先是在person1里查找valueOf()方法，没找到，继续找它的原型，也就是构造函数Person,还是没找到，接着去对象的方法里去找，找到了，然后就成功调用了。

5.constructor和prototype属性

prototype 属性：继承成员被定义的地方，继承的属性和方法是定义在 prototype 属性之上的。然后每个对象实例都具有 constructor 属性，它指向创建该实例的构造器函数。

常见问题

何时在javaScript里使用继承呢？

在小型项目中或者刚开始学习时 -
    因为当不需要对象和继承的时候，仅仅为了使用而使用它们只是在浪费时间而已。但是随着代码量的增大，你就会越来越发现它的必要性。当我们开始创建一系列拥有相似特性的对象时，那么创建一个包含所有共有功能的通用对象，然后在更特殊的对象类型中继承这些特性，将会变得更加方便有用

编码实战

function Person(first, last, age, gender, interests) {
    this.name = {
        first,
        last
    };
    this.age = age;
    this.gender = gender;
    this.interests = interests;
}

var person1=new Person('Chris','Martin',32,'male',['music','guitar']);
var person2=new Person('Gwyneth','Paltrow','35','female',['ironman','movie'])

//
//
var person2=Object.create(person1);


console.log(person1.constructor==person2.constructor);

Person.prototype.farewell = function() {
    alert(this.name.first + ' has left the building. Bye for now!');
};


Person.prototype.greeting = function () {
    alert('Hi! I\'m ' + this.name.first + '.');
};
Person.prototype.bio = function () {
    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
};

function Teacher(first, last, age, gender, interests, subject) {
    Person.call(this, first, last, age, gender, interests);
    this.subject=subject;
}

Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype.constructor = Teacher;
Teacher.prototype.greeting = function() {
    var prefix;

    if(this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
        prefix = 'Mr.';
    } else if(this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
        prefix = 'Mrs.';
    } else {
        prefix = 'Mx.';
    }

    alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
};

典型的构造函数以及继承的使用方法。

扩展思考

除了面向对象编程，还有哪些编程方法？

参考文献

《JavaScript高级编程设计》

Javascript 原型链之原型对象、实例和构造函数三者之间的关系

MDN JavaScript对象入门

更多讨论

1.  原型对象和构造函数的区别？

Object是构造函数，而Object.prototype是构造函数的原型对象。构造函数自身的属性和方法无法被共享，而原型对象的属性和方法可以被所有实例对象所共享。

2．什么是类？

定义对象的特征。它是对象的属性和方法的模板定义.而每一个新的对象，都是类的一个实例。

3.继承怎么用呢？

在Javascript中，继承通过赋予子类一个父类的实例并专门化子类来实现。在现代浏览器中可以使用 Object.create 实现继承.