对象 原型

一、OOP 指什么？有哪些特性

OOP（Object-oriented-programming）：面向对象编程，是一种计算机编程架构。OOP有三大特性：封装、继承、多态。

1. 封装

把方法的具体步骤隐藏起来，对外暴露一个接口供访问。使用者无需关心其中的实现，只需直接调用。

2. 继承

一个类会有“子类”，子类会比父类更加具体化，会继承父类的属性和行为，也可以在此基础上扩展。

3. 多态

多态是指由继承而产生的相关的不同的类，其对象对同一消息会做出不同的响应。

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

function Person(name) {
  this.name = name

  this.personFnc = function () {
    console.log(1)
  }
}

const Jack = new Person('Jack')

三、prototype 是什么？有什么特性

在 JS 中， prototype 是一个 构造函数 / 类（Class）的共有 成员 / 属性。在对象实例化之后，可以通过__proto__（浏览器实现，非标准）访问这一共有属性，如：

function Person(name) {
  this.name = name
}

Person.prototype.sayHi = function(){
  console.log(this.name)
}
const Jack = new Person('Jack')
const Bob = new Person('Bob')

console.log(Jack.__proto__ === Person.prototype)    //true
console.log(Jack.sayHi === Bob.sayHi)    // true

四、画出如下代码的原型图

题目

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('前端');

原型图

prototype 里还有 constructor。

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

function Car(options) {
  this.name = options.name
  this.color = options.color
  this.status = options.status
}

Car.prototype.getStatus = function () {
  console.log('status')
}

Car.prototype.run = function () {
  console.log('run')
}

Car.prototype.stop = function () {
  console.log('stop')
}

var BMW = new Car({
  name: '宝马',
  color: '#fff',
  status: 'run'
})

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

1.  `ct`属性，GoTop 对应的 DOM 元素的容器
2.  `target`属性， GoTop 对应的 DOM 元素
3.  `bindEvent` 方法， 用于绑定事件
4.  `createNode` 方法， 用于在容器内创建节点

function GoTop(options) {
  this.ct = options.ct
  this.createNode()
}

GoTop.prototype.bindEvent = function (type, listener, options) {
  this.target.addEventListener(type, listener, options)
}

GoTop.prototype.createNode = function () {
  const a = document.createElement('a')
  a.href = '#top'
  this.addStyle(a, {
    position: 'fixed',
    right: '20px',
    bottom: '50px',
    border: '1px solid #999',
    padding: '10px'
  })
  this.ct.appendChild(a)

  //target 在这
  this.target = a
}

GoTop.prototype.addStyle = function (node, css) {
  for (let key in css) {
    node.style[key] = css[key]
  }
}

七、木桶布局

木桶布局