- OOP 指什么痘昌？有哪些特性
- “面向?qū)ο缶幊獭保∣bject Oriented Programming钥勋，縮寫為OOP）笔诵，指的是將事物抽象為對象進(jìn)行編程
- 具有“封裝”乎婿、“繼承”、“多態(tài)”的特性
- 封裝：將事物具有的同一類特征封裝起來森逮，使其成為一個(gè)對象
- 繼承：對象之間可以相互繼承，派生對象(子對象)會擁有其原型對象(父對象)的所有方法和屬性闷供，這就是繼承
- 多態(tài)：同一個(gè)原型對象歪脏，派生的兩個(gè)派生對象中的相同方法名(如Array中的length和function中的length)可能實(shí)現(xiàn)的是不同的事情钞艇，這就是多態(tài)。
- 如何通過構(gòu)造函數(shù)的方式創(chuàng)建一個(gè)擁有屬性和方法的對象?
- 屬性和方法要寫成this.xxx的形式
- 保持書寫規(guī)范將構(gòu)造函數(shù)的第一個(gè)字母大寫
- 使用構(gòu)造函數(shù)構(gòu)建對象時(shí)使用new關(guān)鍵字調(diào)用
- prototype 是什么葡秒？有什么特性
- prototype是構(gòu)造函數(shù)的屬性，其值為此構(gòu)造函數(shù)的構(gòu)造出的對象的原型對象学少，如構(gòu)造函數(shù)為People，可以采用people.prototype.xxx為構(gòu)造函數(shù)的所構(gòu)造出的對象的原型對象中添加屬性和方法
- 原型對象內(nèi)的值如果改變绒疗，從這個(gè)原型派生的所有派生對象內(nèi)的原型對象中的這個(gè)值(除非這個(gè)與這個(gè)值有關(guān)的屬性或方法已經(jīng)被覆蓋)都會立即改變
- 任何對象都有其原型對象，除了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('前端');
image.png
5. 創(chuàng)建一個(gè) Car 對象，擁有屬性name琳猫、color、status雹锣；擁有方法run，stop攒射，getStatus
function Car(name,color,status){
this.name = name;
this.color = color;
this.status = status;
}
Car.prototype.run = function(){};
Car.prototype.stop = function(){};
Car.prototype.getStatus = function(){};
var car = new Car();
- 創(chuàng)建一個(gè) GoTop 對象会放，當(dāng) new 一個(gè) GotTop 對象則會在頁面上創(chuàng)建一個(gè)回到頂部的元素咧最，點(diǎn)擊頁面滾動到頂部矢沿。擁有以下屬性和方法
-
ct屬性，GoTop 對應(yīng)的 DOM 元素的容器 -
target屬性栽惶， GoTop 對應(yīng)的 DOM 元素 -
bindEvent方法外厂， 用于綁定事件 -
createNode方法， 用于在容器內(nèi)創(chuàng)建節(jié)點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.layout {
max-width: 1260px;
margin: 0 auto;
height: 1px;
position: relative;
}
.item {
margin: 10px 10px 0 0;
position: absolute;
width: 200px;
color: #aaa;
transition: all 1s;
}
.h1 {
height: 200px;
background: palevioletred;
}
.h2 {
height: 300px;
background: yellow;
}
.h3 {
height: 350px;
background: blueviolet;
}
</style>
</head>
<body>
<div class="layout">
<div class="item h1">1</div>
<div class="item h3">2</div>
<div class="item h2">3</div>
<div class="item h3">4</div>
<div class="item h1">5</div>
<div class="item h3">6</div>
<div class="item h2">7</div>
<div class="item h2">8</div>
<div class="item h3">9</div>
<div class="item h1">10</div>
<div class="item h2">11</div>
<div class="item h3">12</div>
<div class="item h2">13</div>
<div class="item h1">14</div>
<div class="item h1">15</div>
<div class="item h2">16</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
fullwater()
$(window).on('resize',fullwater)
function fullwater(){
var arrLength = parseInt($('.layout').width()/$('.item').outerWidth(true));
var arr = [];
for (var i = 0; i<arrLength; i++){
arr[i] = 0;
}
$('.item').each(function(){
var minValue = Math.min.apply(null,arr),
minIndex = arr.indexOf(minValue);
$(this).css({'top' : minValue,
'left': minIndex*$('.item').outerWidth(true)});
arr[minIndex] += $(this).outerHeight(true);
})
}
function GoTop ($ct){
this.ct = $ct;
this.target = this.createNode();
this.bindEvent();
}
GoTop.prototype.createNode = function(){
var $ct = this.ct;
var $btn = $('<button>GoTop</button>');
$btn.css({
position : 'fixed',
right : 20,
bottom : 20
})
console.log($ct)
console.log($btn)
$ct.append($btn);
return $btn;
}
GoTop.prototype.bindEvent = function(){
this.target.on('click',function(){
$(window).scrollTop(0)
})
}
var aaa = new GoTop($('body'));
</script>
</body>
</html>
