對象、原型

問答

1.OOP 指什么?有哪些特性 (難度: ***)

  • OOP:

Object Oriented Programming,面向?qū)ο缶幊蹋且环N計算機編程架構(gòu)。它是用抽象的方式創(chuàng)建基于現(xiàn)實世界模型的一種編程模式。比如在現(xiàn)實世界中的一個杯子就是一個對象,它擁有各種屬性:顏色、圖案、重量,由什么材質(zhì)構(gòu)成等等。同樣,在OOP編程中,一個對象也有屬性和方法來定義它的特征。

  • 特性:

    • 封裝性:將一個類的使用和實現(xiàn)分開,只保留部分接口和方法與外部聯(lián)系
    • 繼承:子類自動繼承其父級類中的屬性和方法,并可以添加新的屬性和方法或者對部分屬性和方法進行重寫。
    • 多態(tài):多個子類中雖然都具有同一個方法,但是這些子類實例化的對象調(diào)用這些相同的方法后卻可以獲得不同的結(jié)果。 (JavaScript是沒有多態(tài)的概念)

2.如何通過構(gòu)造函數(shù)的方式創(chuàng)建一個擁有屬性和方法的對象? (難度: ***)

使用new操作符,調(diào)用構(gòu)造函數(shù)過程如下:
(1)創(chuàng)建一個新對象;
(2)將構(gòu)造函數(shù)的作用域賦給新對象(因此this就指向這個新對象)
(3)執(zhí)行構(gòu)造函數(shù)中的代碼(為這個新對象添加屬性)
(4)返回新對象
舉個例子:

function Person(name,age){
    this.name = name;
    this.age = age;
    this.sayName = function(){
    console.log(this.name);
    };
};
var person1 = new Person("zhou",23);

3.prototype 是什么?有什么特性 (難度: ***)

  • 每個函數(shù)都有一個prototype(原型)屬性,這個屬性是一個指針,指向一個對象,而這個對象的用途是包含可以由指定類型的所有實例共享的屬性和方法
  • 所有通過該構(gòu)造函數(shù)創(chuàng)建的對象的 proto 屬性對應(yīng)的指,都指向構(gòu)造函數(shù)的 prototype 值。

4.畫出如下代碼的原型圖 (難度: ****)

5.以下代碼中的變量age有什么區(qū)別(難度: ****)

function People (){
 var age = 1;//函數(shù) People 中的局部變量
 this.age = 10;//實例變量,通過 People 的構(gòu)造函數(shù)創(chuàng)建的實例才可以訪問的變量。
                      //var p1 = new People();p1.age;//10
}
People.age = 20;//靜態(tài)變量,通過對象本身可以訪問得到,但是該類的實例無法訪問

People.prototype.age = 30;//People.prototype 是一個對象{},People對象的原型的屬性

代碼

1.創(chuàng)建一個 Car 對象,擁有屬性namecolorstatus;擁有方法runstopgetStatus (難度: ****)

function Car(name,color,status){
        this.name=name
        this.color=color
        this.status=status
    }
Car.prototype={
        run:function(){
            //do sth
        },
        stop:function(){
            //do sth
        },
        getStartus:function(){
            //do sth
        }
    }

2.創(chuàng)建一個 GoTop 對象,當(dāng) new 一個 GotTop 對象則會在頁面上創(chuàng)建一個回到頂部的元素,點擊頁面滾動到頂部。擁有以下屬性和方法 (難度: ****)

ct屬性,GoTop 對應(yīng)的 DOM 元素的容器
target屬性, GoTop 對應(yīng)的 DOM 元素
bindEvent方法, 用于綁定事件
createNode方法, 用于在容器內(nèi)創(chuàng)建節(jié)點

 function GoTop($ct){
        this.ct=$ct
        this.target=$("<button>回到頂部</button>");
        this.creatNode=function(){
            this.ct.append($(this.target));
        };
        this.bindEvent=function(){
            this.target.on("click",function(){
                $(window).scrollTop(0);
            })
        };
        this.creatNode();
        this.bindEvent();
    }
    var go=new GoTop($("body"));

3.使用構(gòu)造函數(shù)創(chuàng)建對象的方式完成輪播功能,使用如下調(diào)用方式

function Carousel($node){
//todo...
}
Carousel.prototype = {
//todo ..
};

var $node1 = $('.ct').eq(0);
var $node2 = $('.ct').eq(1);
var carousel1 = new Carousel($node1);
var carousel2 = new Carousel($node2);

代碼預(yù)覽

4使用構(gòu)造函數(shù)創(chuàng)建對象的方式實現(xiàn) Tab 切換功能

代碼預(yù)覽

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容