JS面向对象

1.OOP 指什么？有哪些特性

OOP，Object-Oriented Programming，即面向对象编程,是一种编程思想。面向对象编程语言的有一个标志，就是类的概念，很多语言中是由类（class）构造出对象实例，通过类可以创建多个具有相同属性和方法的对象。Javascript没有类的概念，JS中的对象可以不依赖于类而直接构建。比如：var ccc={name:"penny"} 。JS中构建对象还可以使用构造函数来创建对象实例。OOP编程的特性：即封装，继承，多态。
封装：就是将类内部的机制隐藏起来，让外界无法访问，从而达到保护数据的目的。封闭一部分让外界无法访问，开放一部分，通过开放部分间接访问私有部分。可以用闭包来实现JS面向对象之私有属性封装。
继承：为了提高代码的复用性，可以用继承，将一个子类继承一个父类，这样子类就可以继承父类的属性和方法，而不需要重新写一个类中的属性和方法。JavaScript的继承方式是通过原型链来完成的。
多态：多个子类中虽然都具有同一个方法，但是这些子类实例化的对象调用这些相同的方法后却可以获得不同的结果。

---

2.如何通过构造函数的方式创建一个拥有属性和方法的对象?

所谓构造函数就是，能构建继承了自身属性的对象实例的函数体。通过这个函数生成一个新的对象（object），新生成的对象实例继承了这个原始函数的属性。构造函数的prototype属性对应的是一个对象，这个对象就是原型对象，在原型对象里有共有的方法或属性，所有通过构造函数声明的实例都可以共享这个方法或属性。任何函数都可当成构造函数用new去创建这个函数的实例，当函数作为构造函数去使用时，这个构造函数内部的this指向由这个构造函数生成的实例对象。
构造函数在执行new构造一个实例的时候其过程有以下三个步骤：

var Person = function () { };
var p = new Person();

第一步：var p={};//创建空对象
第二步：p.__proto__=Person.prototype //将空对象p的__proto__属性指向创建p对象的构造函数的prototype属性即Person的原型对象
第三步初始化p即构造并返回p：Person.call(p)//这时候this指向新生成的实例对象。
使用new其实是语法糖，减少代码。
构造函数创建实例对象代码如下：

Paste_Image.png

构造函数有三个参数：品牌，产地，速度，当用new调用构造函数生成实例对象car1（传入参数）后，car1就有了三个属性。

---

3.prototype 是什么？有什么特性

prototype（原型）是每个函数都有的原生属性，这个属性对应的是一个对象（object）即原型对象。原型对象上的属性或方法是函数体作为构造函数创建实例对象时所共享的属性或方法。

Paste_Image.png

对构造函数的prototype增加一个price对象表示价格。再次用这个构造函数生成实例对象car2后，car2也有price属性

---

4.画出如下代码的原型图

function People (name){
  this.name = name;
  this.sayName = function(){
    console.log('my name is:' + this.name);
  }
}

People.prototype.walk = function(){
  console.log(this.name + ' is walking');  
}

var p1 = new People('饥人谷');
var p2 = new People('前端');

Paste_Image.png

---

5.以下代码中的变量age有什么区别

function People (){
  var age = 1//局部变量，函数体内才能访问的私有变量
  this.age = 10;//实例变量，this的实例才能访问到的变量。需要new一个实例后再通过实例.才能访问
}
People.age = 20;//静态变量，一切皆对象，函数也是对象，也可以定义属性
People.prototype.age = 30;//函数原型的属性

---

6.创建一个 Car 对象，拥有属性name、color、status；拥有方法run，stop，getStatus

function Car(name,color,status){
this.name=name
this.color=color
this.status=status
}
Car.prototype={
run:function(){
alert('running')
},
stop:function(){
alert('stop')
},
getStartus:function(){
return this.status
}
}

car的方法run,stop,getStatus是所有车都共有的特性，可以将共有的特性抽象成car这个对象的共有属性放到原型对象上。

Paste_Image.png

---

7.创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法

ct属性，GoTop 对应的 DOM 元素的容器
target属性， GoTop 对应的 DOM 元素
bindEvent 方法， 用于绑定事件
createNode 方法， 用于在容器内创建节点
预览地址

---

8.使用构造函数创建对象的方式完成轮播功能，使用如下调用方式

function Carousel($node){
//todo...
}
Carousel.prototype = {
//todo ..
};

var $node1 = $('.ct').eq(0);
var $node2 = $('.ct').eq(1);
var carousel1 = new Carousel($node1);
var carousel2 = new Carousel($node2);

预览地址

---

9.使用构造函数创建对象的方式实现 Tab 切换功能

预览地址

****本文版权归本人和饥人谷所有，转载请注明来源。****