JavaScript中的对象与原型

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

OOP是object oriented programming - 面向对象编程的缩写。它具有三大特性：封装、继承、多态

• 封装：将客观的事物封装成抽象的类，类一般被指派代表一类具有共同属性的事物，也可能具有相应的一些功能，而这些功能的具体实现是不被暴露出来的，用户只能接触到一些”接口“，这些接口告知用户可以使用什么样的功能，却无法探知里面的内容。类似一个黑盒操作模型。封装后的类可以具有更灵活的组合使用方式以及高复用性，提高了开发的效率。
• 继承：继承可以让某个类型的对象获得另一个类型的属性与方法，而不需要再次手动编写属于自己的同样的属性/方法。使用现有的类，我们可以对这些方法进行拓展。通过继承创建新的类称为子类或派生类，被继承的类称为基类，（父类，超类），继承的过程，是从一般到特殊的过程。实现继承我们可以通过继承和组合实现，继承概念的实现方式有两类，实现继承和接口继承，实现继承是直接使用父类的属性和方法，而无需额外的编码能力，接口继承仅仅继承了属性和方法的名称，但子类需要去对其提供实现的能力。
• 多态：子类继承了来自父级类中的属性和方法，并对其中部分方法重写。就像数组和函数都是object，但数组的length和函数的length是不一样的。

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

function Person(name,age){
  this.name = name;
  this.age = age;
}
Person.prototype.sayName = function(){
  console.log(this.name);
};
var tom = new Person('tom',15);
console.log(tom.name);
console.log(tom.age);
tom.sayName();

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

prototype是当创造一个函数时，按照一定规则创造出来的原型对象，这个原型对象会自动获取一个constructor属性，它是指向prototype属性所在的函数的指针。原型对象里的被指定给this的属性会被所有通过此构造函数创造出的实例共享，这样就解决了使用构造函数方式创造对象时造成的重复问题。

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 Car(name,color,status){
  this.name = name;
  this.color = color;
  this.status = status;
  this.run = function(){
    this.status = 'running';
  };
  this.stop = function(){
    this.status = 'stopging';
  };
  this.getStatus = function(){
    console.log(this.status);
  };
}
var car = new Car('11','red','stopping')

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

code

//1. `ct`属性，GoTop 对应的 DOM 元素的容器
//2.  `target`属性， GoTop 对应的 DOM 元素
//3.  `bindEvent` 方法， 用于绑定事件
//4 `createNode` 方法， 用于在容器内创建节点
function GoTop($container){
  this.ct = $container || $('body');
  this.target = $('<button>BackToTop</button>');
  this.bindEvent = function(){
    var btn = this.target;
    var self = this;
    this.target.on('click',function(){
      $(window).scrollTop(0);
    });
    $(window).on('scroll',function(){
      console.log(1);
      var $this = $(this);
      if($this.scrollTop() > 100){
        btn.show();
      }
      else {
        btn.hide();
      }
    });
  };
  this.createNode = function(){
    this.ct.append(this.target);
    this.target.hide();
  };
  this.createNode();
  this.bindEvent();

}
var btn = new GoTop();

7： 使用木桶布局实现一个图片墙
cankao
code