問(wèn)題1： OOP 指什么？有哪些特性

OOP(Object-oriented programming)指面向?qū)ο蟪绦蛟O(shè)計(jì), 其中兩個(gè)最重要的概念就是對(duì)象和類

• JS中的對(duì)象都是基于一個(gè)引用類型創(chuàng)建的, 這個(gè)引用類型可以是原生類型, 也可以是開(kāi)發(fā)人員定義的類型
  對(duì)象是無(wú)序?qū)傩缘暮霞? 由若干個(gè)鍵值對(duì)構(gòu)成, 屬性包含基本值, 對(duì)象或函數(shù)
• 類是具備了某些功能和屬性的抽象模型, 實(shí)際應(yīng)用中需要對(duì)類進(jìn)行實(shí)例化, 類在實(shí)例化之后就是對(duì)象
  而JavaScript語(yǔ)言沒(méi)有"類", 而改用構(gòu)造函數(shù)(constructor)作為對(duì)象基本結(jié)構(gòu)的模板. 構(gòu)造函數(shù)專門用來(lái)生成對(duì)象, 一個(gè)構(gòu)造函數(shù)可生成 多個(gè)對(duì)象, 這些對(duì)象都有相同的結(jié)構(gòu)
• 面向?qū)ο笠驗(yàn)榉庋b, 繼承, 多態(tài)的特性使程序更易于擴(kuò)展, 維護(hù)和復(fù)用

面向?qū)ο笕筇匦?

• 封裝性: 講一個(gè)類的使用和實(shí)現(xiàn)分開(kāi), 隱藏對(duì)象的屬性和實(shí)現(xiàn)細(xì)節(jié), 僅對(duì)外提供公共訪問(wèn)方式, 提高代碼復(fù)用性和安全性
• 繼承性: 子類自動(dòng)繼承其父級(jí)類中的屬性和方法, 并可以, 并可以添加新的屬性和方法或者對(duì)部分屬性和方法進(jìn)行重寫(xiě), 繼承增加了代碼的復(fù)用性, 讓類與類之間產(chǎn)生了聯(lián)系, 提供了多態(tài)的前提
• 多態(tài)性: 子類繼承了來(lái)自父級(jí)類中的屬性和方法, 并對(duì)其中部分方法進(jìn)行重寫(xiě). (比如函數(shù)的length和數(shù)組的length都繼承自對(duì)象但作用不同), 提高了代碼的擴(kuò)展性和可維護(hù)性

問(wèn)題2： 如何通過(guò)構(gòu)造函數(shù)的方式創(chuàng)建一個(gè)擁有屬性和方法的對(duì)象?

• 構(gòu)造函數(shù)可以創(chuàng)建特定類型的對(duì)象, Object, Array, RegExp等是原生構(gòu)造函數(shù), 運(yùn)行時(shí)會(huì)自動(dòng)出現(xiàn)在執(zhí)行環(huán)境中并擁有相應(yīng)的方法
• 此外我們也可以創(chuàng)建自定義的構(gòu)造函數(shù), 從而自定義對(duì)象類型的屬性和方法:

function Person(name, sex, age) {
    this.name = name
    this.sex = sex
    this.age = age
    this.sayName = function() {
        console.log(this.name)
    }
}

var person = new Person('dot', 'female', 2)

問(wèn)題3： prototype 是什么？有什么特性

• 我們創(chuàng)建的每一個(gè)函數(shù)都有一個(gè)prototype(原型)屬性, 這個(gè)屬性是一個(gè)指向某個(gè)對(duì)象的指針, 這個(gè)對(duì)象的用途是可以包含特定類型的所有實(shí)例共享的屬性和方法; 換句話說(shuō), 我們不必在構(gòu)造函數(shù)中定義對(duì)象實(shí)例的信息, 而是將這些信息添加到原型對(duì)象中

function Person() {

}

Person.prototype.name = 'dot'
Person.prototype.sex = 'female'
Person.prototype.age = 2
Person.prototype.sayName = function () {
    console.log(this.name)//dot
}

var person1 = new Person()
person1.sayName()//dot

var person2 = new Person()
person2.sayName()//dot

console.log(person1.sayName() === person2.sayName())//true

• 原型對(duì)象特性:
  • 只要?jiǎng)?chuàng)建了一個(gè)新函數(shù), 就會(huì)為該函數(shù)創(chuàng)建一個(gè)prototype屬性, 這個(gè)屬性指向函數(shù)的原型對(duì)象, 默認(rèn)情況下, 所有的原型對(duì)象都會(huì)自動(dòng)獲得一個(gè)constructor屬性, 指向他的構(gòu)造函數(shù); prototype被設(shè)計(jì)出來(lái)就是用來(lái)公用的，它是js繼承機(jī)制的靈魂。
  • 創(chuàng)建了自定義的構(gòu)造函數(shù)之后, 其原型對(duì)象默認(rèn)只會(huì)有constructor屬性, 其他方法都是由Object繼承得來(lái)的
  • 當(dāng)調(diào)用構(gòu)造函數(shù)創(chuàng)建一個(gè)新實(shí)例后, 該實(shí)例的內(nèi)部將包含一個(gè)_proto_指針指向構(gòu)造函數(shù)的原型對(duì)象

問(wèn)題4：畫(huà)出如下代碼的原型圖

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

問(wèn)題5： 創(chuàng)建一個(gè) Car 對(duì)象，擁有屬性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.run)}
Car.prototype.stop = function() {console.log(this.stop)}
Car.prototype.getStatus = function() {
    console.log(this.status)
}

var car =  new Car('mk', 'red', 201)

問(wèn)題6： 創(chuàng)建一個(gè) GoTop 對(duì)象，當(dāng) new 一個(gè) GotTop 對(duì)象則會(huì)在頁(yè)面上創(chuàng)建一個(gè)回到頂部的元素，點(diǎn)擊頁(yè)面滾動(dòng)到頂部。擁有以下屬性和方法

1. ct屬性，GoTop 對(duì)應(yīng)的 DOM 元素的容器
2. target屬性， GoTop 對(duì)應(yīng)的 DOM 元素
3. bindEvent 方法， 用于綁定事件
4. createNode 方法， 用于在容器內(nèi)創(chuàng)建節(jié)點(diǎn)

demo

問(wèn)題7： 使用木桶布局實(shí)現(xiàn)一個(gè)圖片墻

demo