- OOP 指什么含衔？有哪些特性 (難度: ***)
面向對象程序設計（英語：Object-oriented programming，縮寫：OOP）是種具有對象概念的程序編程范型二庵，同時也是一種程序開發(fā)的方法贪染。
-
特性：
多態(tài)：在不同場景下有不同的處理方式。
封裝：獨立不需要具體了解其工作實現，熟悉接口即可催享。
繼承：子類繼承父類的屬性和方法,功能擴展杭隙。
- 如何通過構造函數的方式創(chuàng)建一個擁有屬性和方法的對象? (難度: ***)
var Preson = function(name, age){
this.name = name;
this.age = age;
this.sayName = function(){
console.log('My name is ' + this.name);
}
}
var people = new Preson('tom', 18);
1Preson就是構造函數因妙，用來生成對象實例（用this關鍵字代表要生成的實例）痰憎；
2使用new命令票髓，執(zhí)行（調用）構造函數Preson，生成實例對象铣耘；
1new命令創(chuàng)建一個空對象洽沟，作為將要返回的對象實例
2將這個空對象的原型__proto__，指向構造函數的prototype屬性
3將這個空對象賦值給函數內部的this關鍵字
4開始執(zhí)行構造函數內部的代碼
5構造函數內部蜗细，this指的是一個新生成的空對象裆操，所有針對this的操作，都會發(fā)生在這個空對象上
參考
- prototype 是什么炉媒？有什么特性 (難度: ***)
- JavaScript中的對象繼承的另一個對象稱為原型對象（prototype）踪区，null它沒有自己的原型對象。
function Car (name) {
this.name = name;
}
Car.prototype.color = 'red';
var car1 = new Car('BMW');
var car2 = new Car('Audi');
car1.color // 'red'
car2.color // 'red'
通過構造函數創(chuàng)建的實例對象共用原型對象(prototype)上的屬性和方法吊骤，如果實例對象沒有某個屬性或方法時缎岗，它將會到構造函數的prototype內尋找。
color屬性在__proto__中白粉，也就是構造函數Car.prototype對象內
- 畫出如下代碼的原型圖 (難度: ****)
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('前端');
- 以下代碼中的變量age有什么區(qū)別(難度: ****)
function People (){
var age = 1 //函數的局部變量
this.age = 10; //構造函數的實例變量传泊，通過new命令創(chuàng)建實例對象訪問
}
People.age = 20; //函數的靜態(tài)變量，可以認為是函數的屬性
People.prototype.age = 30; //函數原型對象添加的屬性,與通過new命令創(chuàng)建實例對象共有
代碼
- 創(chuàng)建一個 Car 對象蜗元，擁有屬性name或渤、color系冗、status奕扣；擁有方法run，stop掌敬，getStatus
(難度: 4*)
var Car = {
this.name = 'BMW';
this.color = 'red';
this.status = 0;
run:function(){
this.status = 1;
//todo..
}
stop:function(){
this.status = 0;
//todu..
}
getStatus:function(){
console.log(this.status);
if (this.status) {
return 'running';
} else {
return 'stopped';
}
}
}
- 創(chuàng)建一個 GoTop 對象惯豆，當 new 一個 GotTop 對象則會在頁面上創(chuàng)建一個回到頂部的元素，點擊頁面滾動到頂部奔害。擁有以下屬性和方法 (難度: 4*)
- ct屬性楷兽，GoTop 對應的 DOM 元素的容器
- target屬性， GoTop 對應的 DOM 元素
- bindEvent方法华临， 用于綁定事件
- createNode 方法芯杀， 用于在容器內創(chuàng)建節(jié)點
代碼 - 使用構造函數創(chuàng)建對象的方式完成輪播功能( 查看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);
- 使用構造函數創(chuàng)建對象的方式實現 Tab 切換功能
代碼
本博客版權歸 本人和饑人谷所有雅潭，轉載需說明來源
