問答
1. OOP指什么?有哪些特性
面向對象程序設計(Object-oriented programming)
封裝
封裝機制將數據和代碼捆綁到一起,避免了外界的干擾和不確定性。它同樣允許創建對象。簡單的說,一個對象就是一個封裝了數據和操作這些數據的代碼的邏輯實體。 在一個對象內部,某些代碼和(或)某些數據可以是私有的,不能被外界訪問。通過這種方式,對象對內部數據提供了不同級別的保護,以防止程序中無關的部分意外的改變或錯誤的使用了對象的私有部分。
繼承
繼承是可以讓某個類型的對象獲得另一個類型的對象的屬性的方法。它支持按級分類的概念。例如,知更鳥屬于飛鳥類,也屬于鳥類。就像圖5中描繪的那樣,這種分類的原則是,每一個子類都具有父類的公共特性。
多態
多態是OOP的另一個重要概念。多態的意思是事物具有不同形式的能力。舉個例子,對于不同的實例,某個操作可能會有不同的行為。這個行為依賴于所要操作數據的類型。比如說加法操作,如果操作的數據是數,它對兩個數求和。如果操作的數據是字符串,則它將連接兩個字符串。
2. 如何通過構造函數的方式創建一個擁有屬性和方法的對象?
例:
function Hunger(name,age){
this.name = name,
this.age = age
this.func = function(name){
console.log(name)
}
}
var p1 = new Hunger("hunger",18);
p1.func("name",18);
3. prototype是什么?有什么特性
prototype是構造原型,構造函數的prototype指向其所屬類的原型對象,一個類的原型對象初始值是與類同名的
function Animal(){}
console.log(Animal.prototype)
// 結果:
Object {}
constructor: function Animal()
__proto__: Object
// Animal類的原型對象有兩個屬性:constructor和__proto__。
constructor屬性便是構造函數Animal()。__proto__屬性指向的是
Animal類的父類原型對象
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. 以下代碼中的變量name有什么區別
function People (){
var name = "饑人谷"; // 函數內部變量name == “饑人谷”
this.name = "我"; // this指向的name == "我"(不使用構造函數時為window)
}
People.name = "jscode"; // 對象People的屬性name
People.prototype.name = "學前端"; // People的原型對象的屬性name
代碼
1. 創建一個 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 = "stop";
}
this.getStatus: function(){
return this.status;
};
}
var p1 = new Car("BMW","black","running");
2. 創建一個GoTop對象,當new一個GotTop對象則會在頁面上創建一個回到頂部的元素,點擊頁面滾動到頂部。擁有以下屬性和方法
ct
屬性,GoTop對應的DOM元素的容器
target
屬性,GoTop對應的DOM元素
bindEvent
方法,用于綁定事件
createNode
方法,用于在容器內創建節點
function GoTop($ct){
this.ct = $(".ct");
this.creatNode = function(){
this.ct.append("<div class='goTop'></div>");
}
this.target = $(".goTop");
this.bindEvent = function(){
this.target.on("click",function(){
$(window).scrollTop(0);
});
}
}
var goTop = newGoTop($(".ct"));
3. 使用構造函數創建對象的方式完成輪播功能( 查看demo ),使用如下調用方式
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);
本文版權歸本人(簾外修竹),轉載須說明來源