对象_原型

[yongheng2016]

问题1： OOP 指什么？有哪些特性

面向对象程序设计(Object-oriented programming):当我们提到面向对象的时候，它不仅指一种程序设计方法。它更多意义上是一种程序开发方式。

原则：开放封闭原则

• 1. 对于扩展是开放的，当应用的需求改变时，可以对模块进行扩展，得以满足新的需求或功能
• 2. 对于修改是关闭的，对模块进行扩展时，不必改变模块的源码

特性：

• 封装型

面向对象程序设计隐藏了某一方法的具体执行步骤，取而代之的是通过消息传递机制传送消息给它 将一些属性和方法放入到一个对象里面，就是简单的封装

function Dog(){
    name: dog,
    this.call: function (){
        console.log('汪汪汪')
    }
}
var dog = new Dog( )
dog.call()  //可以得到实例dog，每个dog都可以call，但是并不知道内部函数是如何让它可以call的

• 继承

我拥有被继承者的所有方法和属性

• 多态

对同一个方法有不同的表现

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

function Cat(){
  this.name = 'xiaohua',
  this.age = 1,
  this.skill = function (){
    console.log('call 喵')
  }
}
var cat = new Cat()

问题3： prototype 是什么？有什么特性

Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

1. prototype是构造函数的一个属性
2. 这个属性包含一个对象
3. 所有实例需要共享的属性和方法都放在这个对象里面
4. 那些不需要共享的属性和方法都放在构造函数里面
5. 实例对象的属性和方法，分成两种，一种是本地的，另一种是引用的。
6. 只要修改了prototype对象，就会同时影响到每个实例对象。
7. prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数。
8. 由于constructor属性定义在prototype对象上面，意味着可以被所有实例对象继承。 constructor属性的作用，是分辨原型对象到底属于哪个构造函数。

function F() {};
var f = new F();

f.constructor === F // true
f.constructor === RegExp // false

9. 修改原型对象时，一般要同时校正constructor属性的指向。（注意）

// 避免这种写法
C.prototype = {
  method1: function (...) { ... },
  // ...
};

// 较好的写法
C.prototype = {
  constructor: C,
  method1: function (...) { ... },
  // ...
};

// 更好好的写法
C.prototype.method1 = function (...) { ... };

参考：

• 阮一峰：Javascript继承机制的设计思想
• 阮一峰：prototype对象

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

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

function CreateCar (name, color, status){
  this.name = name
  this.color = color
  this.status = status
}
CreateCar.prototype.run = function (){
  console.log('run')
}
CreateCar.prototype.stop = function (){
  console.log('stop')
}
CreateCar.prototype.getStatus = function (){
  console.log('getStatus')
}

var car = new CreateCar('BMW','red', 'sale')

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

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

function GoTop(ct){
  this.ct = ct
  this.createNode()
  this.target = document.getElementsByClassName('target')[0]
  this.isShow()
}  
  
GoTop.prototype.createNode = function (){
  var target = document.createElement('div')

  target.textContent = 'GOT TOP'
  target.classList.add('target')
  this.ct.appendChild(target)
}   
  
GoTop.prototype.isShow = function (){
  var _this = this,
      showHeight = this.ct.clientHeight,
      ctScrollTop = 0

  this.ct.onscroll = function (){
    ctScrollTop = ct.scrollTop

    if (ctScrollTop>showHeight*0.2){
      _this.target.style.display = 'block'
      _this.bindEvent()
    }else{
      _this.target.style.display = 'none'
    }

  }
}   
  
GoTop.prototype.bindEvent = function (){
  var _this = this
  
  this.target.onclick = function (){
    _this.ct.scrollTop = 0
  }
}  
   
new GoTop(ct)

问题7： 使用木桶布局实现一个图片墙

效果：http://js.jirengu.com/dunukagobu