- OOP 指什么？有哪些特性
- “面向对象编程”（Object Oriented Programming，缩写为OOP），指的是将事物抽象为对象进行编程
- 具有“封装”、“继承”、“多态”的特性
- 封装：将事物具有的同一类特征封装起来，使其成为一个对象
- 继承：对象之间可以相互继承，派生对象(子对象)会拥有其原型对象(父对象)的所有方法和属性，这就是继承
- 多态：同一个原型对象，派生的两个派生对象中的相同方法名(如Array中的length和function中的length)可能实现的是不同的事情，这就是多态。
- 如何通过构造函数的方式创建一个拥有属性和方法的对象?
- 属性和方法要写成this.xxx的形式
- 保持书写规范将构造函数的第一个字母大写
- 使用构造函数构建对象时使用new关键字调用
- prototype 是什么？有什么特性
- prototype是构造函数的属性，其值为此构造函数的构造出的对象的原型对象，如构造函数为People，可以采用people.prototype.xxx为构造函数的所构造出的对象的原型对象中添加属性和方法
- 原型对象内的值如果改变，从这个原型派生的所有派生对象内的原型对象中的这个值(除非这个与这个值有关的属性或方法已经被覆盖)都会立即改变
- 任何对象都有其原型对象，除了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. 创建一个 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();
- 创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法
-
ct属性，GoTop 对应的 DOM 元素的容器 -
target属性， GoTop 对应的 DOM 元素 -
bindEvent方法， 用于绑定事件 -
createNode方法， 用于在容器内创建节点
<!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>
网友评论