35.对象、原型

问答

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

OOP(Object Oriented Programming)指面向对象编程，是一种程序设计思想。它将对象作为程序的基本单元。对象具有唯一的标识符，对象包括属性（Properties）和方法（Methods），属性就是需要记忆的信息，方法就是对象能够提供的服务。
面向对象有两个基本概念：
①类：类（Class）定义了一件事物的抽象特点；它定义了一些特点（属性 property）和行为（方法 method）；类是对象的类型模板。
②实例：实例是根据类创建的对象；可以说类的实例是对象，类实际上就是一种数据类型；对象是类的具体化。
面向对象有三个基本特征：
①封装：将一个类的使用和实现分开，只保留部分接口和方法与外部联系。封装就是隐藏了某一方法的具体执行步骤。
②继承：在某种情况下，一个类会有子类，子类比父类要更加具体化。子类会自动继承父类的属性和行为，并且包含它们自己的。它还可以添加新的属性和方法或者对部分属性和方法进行重写。继承增加了代码的可重用性。
③多态：是指由继承而产生的相关的不同的类，多个子类中虽然都具有同一个方法，但是这些子类实例化的对象调用这些相同的方法后却可以获得完全不同的结果。多态性增强了软件的灵活性。

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

用new的方法创建，这一过程分为三步：
①创建类的实例。这步是把一个空的对象的 proto 属性设置为 F.prototype 。
②初始化实例。函数 F 被传入参数并调用，关键字 this 被设定为该实例。
③返回实例。
举例说明

function People(name,age){
        this.name=name;
        this.age=age;
        this.say=function(){
            console.log(this.name + '说：我' + this.age + '岁了');
        }
        console.log('name:hunger');
}
var p1=new People('hunger',100);
var p2=new People('valley',2);

Paste_Image.png

使用new操作符来调用一个构造函数的时候，发生了四件事：
①var p1 = {}; //创建一个空对象p1
②p1. proto = Person.prototype; //将空对象p1的 proto属性指向创建p对象的构造函数的prototype属性即Person的原型对象
③Person.call(p1); //将构造函数的作用域赋给新对象，因此Person函数中的this指向新对象p1
④return p1; //返回新对象p1

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

prototype是每个函数都带有的属性。它指向的是一个对象，叫原型对象。原型对象可视为公共区域，默认含有constructor（就是是Person函数自己），proto这两个属性。
每个对象都有个内部属性 proto,这个属性指向prototype属性。
构造函数创建出来的对象实例也是对象，其proto指向构造函数的prototype.
特性：构造函数的实例的proto属性都指向该原型对象。
也可以说成将函数用作构造函数创建新实例的时候，这个新的对象会从原型对象上继承属性和方法。
举例说明：

function People(name,age){
        this.name=name;
        this.age=age;
        this.say=function(){
            console.log(this.name + '说：我' + this.age + '岁了');
        }
}
People.prototype={friend:'jirengu'};
var p1=new People('hunger',100);
var p2=new People('valley',2);

Paste_Image.png

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;  //实例变量，People类的实例可以访问
}
People.age = 20;  //静态变量，通过对象本身可以访问得到，但是该类的实例无法访问

People.prototype.age = 30;  //设置People对象原型的属性，实例可以访问
var p1=new People();

Paste_Image.png

代码

1.创建一个 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(){
    console.log('this car is running')
}
Car.prototype.stop=function(){
    console.log('this car is stopping');
}
Car.prototype.getStatus=function(){
    console.log('this car is ' + this.status);
}

var Car1=new Car('Toyota','black','run');

Paste_Image.png

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

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

3.使用构造函数创建对象的方式完成轮播功能( 查看demo2)，使用如下调用方式

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);

在线预览

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

在线预览

---