对象&原型

OOP 指什么?有哪些特性

Object-oriented programming 面向对象编程;

  • OOP 是一种编程模式,这种模式将数据封装成对象,采用操作对象的形式来编程;
    JS 是一种非常注重 OOP 的语言,它遵循 prototype 的方式,而不是传统 C 系语言的 class 模型

  • 特性

    • 类与对象:类的定义包含了数据的形式以及对数据的操作。对象是类的实例。
    • 封装性:封装是通过限制只有特定类的对象可以访问这一特定类的成员,而它们通常利用接口实现消息的传入传出
    • 继承性:,在某种情况下,一个类会有“子类”。子类比原本的类(称为父类)要更加具体化,当一个类从多个父类继承时,我们称之为“多重继承”
    • 多态:多态(Polymorphism)是指由继承而产生的相关的不同的类,其对象对同一消息会做出不同的响应
    • 抽象性:抽象(Abstraction)是简化复杂的现实问题的途径,它可以为具体问题找到最恰当的类定义,并且可以在最恰当的继承级别解释问题

维基百科
MDN

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

function Person(name, age) {
  this.name = name
  this.age = age
  this.say = function(){
    console.log('Hello ' + this.name);
  }
}

var s = new Person('tom', '20')
s.say();

prototype 是什么?有什么特性

prototype(原型),每一个 JS 对象都有原型,原型是一个对象,所有的 JS 对象都从原型链里面继承属性和方法

  1. 字面量创建对象的原型链
var a = {
  a: 1
}
// 原型链 a ---> Object.prototype ---> null
var b = ['hello', 'world']
// 原型链 b ---> Array.prototype ---> Object.prototype ---> null

function fn() {
  return 2
}
// 原型链 fn ---> Function.prototype ---> Object.prototype ---> null
  1. 构造函数(constructor)创建对象的原型链
var Test = function() {
  this.name = 'Tuuu'
}

Test.prototype = {
  call: function(){
    console.log(this.name)
  }
}
var init = new Test()
init
// 原型链第一层指向'构造函数.prototype'
// 原型链 init ---> Test.prototype(构造函数.prototype) ---> Object.prototype ---> null
  1. Object.create ES5 的语法,可以快速创建原型链
var a = {
  a: 1
}
// 原型链 a ---> Object.prototype ---> null

var b = Object.create(a);
// 原型链 b ---> a ---> Object.prototype ---> null

var c = Object.create(b);
// 原型链 c ---> b ---> a ---> Object.prototype ---> null

var d = Object.create(null);
// 原型链 d ---> null

画出如下代码的原型图

   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('前端');
p1 ---> People.prototype ---> Object.prototype ---> null
p1 ---> People.prototype ---> Object.prototype ---> null

创建一个 Car 对象,拥有属性namecolorstatus;拥有方法runstopgetStatus

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

Car.prototype = {
  run: function(){
    console.log('Run')
  },
  stop: function(){
    console.log('Stop')
  },
  getStatus: function(){
    console.log(this.status)
  }
}

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

```
1\. `ct`属性,GoTop 对应的 DOM 元素的容器
2\.  `target`属性, GoTop 对应的 DOM 元素
3\.  `bindEvent` 方法, 用于绑定事件
4 `createNode` 方法, 用于在容器内创建节点
```
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <title>面向对象编程</title>
  <style>
    .container {
      height: 1500px;
    }

    .goTop {
      font-size: 20px;
      position: fixed;
      right: 30px;
      bottom: 20px;
      cursor: pointer;
    }
    .hide {
      display: none;
    }
  </style>
</head>
<body>
  <div class="container">
    顶部
    <div class="goTop hide"></div>
  </div>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
    var GoTop = function(ct, target){
      this.ct = ct;
      this.target = target;
      this.bindEvent();
      this.createNode();
    }
    GoTop.prototype = {
      bindEvent: function(){
        var that = this;
        // 滚动事件
        $(window).scroll(function(){
          if ($(window).scrollTop() > window.innerHeight) {
            that.target.removeClass('hide');
          } else {
            that.target.addClass('hide');
          }
        })

        //点击事件
        that.target.on('click', function(){
          $(window).scrollTop(0);
          console.log(1)
        })
      },

      // 创建节点
      createNode: function(){
        this.target.html('<span>回到顶部</span>');
      }

    }
    var gotop1 = new GoTop($('.container'), $('.goTop'));
  </script>
</body>
</html>

预览地址

使用木桶布局实现一个图片墙

Github预览地址
Github代码地址

推荐阅读更多精彩内容