OOP 指什么？有哪些特性
OOP指面向对象程序设计，是种具有对象概念的程序编程典范，同时也是一种程序开发的抽象方针。OOP有继承、封装、多态三大特性
- 继承：它可以使用现有类的所有功能，并在无需重新编写原来的类的情况下对这些功能进行扩展
- 多态：是允许你将父对象设置成为和一个或更多的他的子对象相等的技术，赋值之后，父对象就可以根据当前赋值给它的子对象的特性以不同的方式运作
- 封装：也就是把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏
如何通过构造函数的方式创建一个拥有属性和方法的对象?
代码示例
function Create(name, feature) {
this.init = function() {
this.name = name
this.feature = feature
this.doSomething = function() {
console.log("doing something")
}
}
this.init()
}
var obj1 = new Create("jack", "funny")
var obj2 = new Create("rose", "good")
console.log(obj1.name)
console.log(obj1.feature)
obj1.doSomething()
console.log(obj2.name)
console.log(obj2.feature)
obj2.doSomething()
prototype 是什么？有什么特性?
- JavaScript的每个对象都继承另一个对象，后者称为“原型”（prototype）对象。只有null除外，它没有自己的原型对象。
- 原型对象上的所有属性和方法，都能被派生对象共享。
- 通过构造函数生成实例对象时，会自动为实例对象分配原型对象。每一个构造函数都有一个prototype 属性，这个属性就是实例对象的原型对象。
- 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('前端');
image.png
创建一个 Car 对象，拥有属性name、color、status；拥有方法run，stop，getStatus
function AutoMobile(name, color, status) {
this.name = name
this.color = color
this.status = status
AutoMobile.prototype.run = function() {
console.log("It's running")
}
AutoMobile.prototype.stop = function() {
console.log("It stopped")
}
AutoMobile.prototype.getStatus = function() {
console.log("Its status is " + Car.status)
}
}
var Car = new AutoMobile("jeep", "blue", "good")
console.log(Car.name)
console.log(Car.color)
Car.run()
Car.stop()
Car.getStatus()
创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<style>
.content {
width: 500px;
height: 1000px;
border: 1px solid blue;
}
.btn {
width: 70px;
height: 18px;
line-height: 18px;
text-align: center;
margin: 0 auto;
border: 1px solid black;
border-radius: 3px;
cursor: pointer;
}
</style>
<body>
<div class="ct"><div class="content"></div></div>
<script>
function GoTop() {
this.ct = $(".ct")
this.target = this.createNode()
this.bindEvent()
}
GoTop.prototype.createNode = function() {
var html = "<div class=btn>返回顶部</div>"
$(".ct").append($(html))
return $(".btn")
}
GoTop.prototype.bindEvent = function() {
console.log(this.target)
this.target.on("click", function() {
console.log("test")
$(window).scrollTop(0)
})
}
var gotop = new GoTop()
</script>
</body>
</html>
使用木桶布局实现一个图片墙
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.img-preview {
width: 1000px;
margin: 0 auto;
}
.img-row {
margin-bottom: 8px;
}
.img-row::after {
content: '';
display: block;
clear: both;
}
.img-box {
float: left;
}
.img-line .img-box:firtst-child {
padding-left: 0;
}
</style>
<body>
<div class="img-preview"></div>
<script>
function Barrel($ct) {
this.$ct = $ct
this.rowList = []
this.loadImg()
}
Barrel.prototype = {
loadImg: function() {
var imgs = this.getImgUrls(20)
var _this = this
for(var i = 0; i < imgs.length; i++) {
let img = new Image()
img.src = imgs[i]
img.onload = function() {
var imgInfo = {
target: img,
width: 200*(img.width/img.height),
height: 200
}
_this.render(imgInfo)
}
}
},
render: function(imgInfo) {
var clientWidth = this.$ct.width();
var rowWidth = 0
var newRowHeight = 0
var lastImgInfo = imgInfo
this.rowList.push(imgInfo)
for(var i = 0; i < this.rowList.length; i++) {
rowWidth = rowWidth + this.rowList[i].width
}
if(rowWidth > clientWidth) {
this.rowList.pop()
rowWidth -= lastImgInfo.width
newRowHeight = clientWidth * 200 / rowWidth
this.layout(newRowHeight)
this.rowList = []
this.rowList.push(imgInfo)
console.log("test")
}
},
layout: function(newRowHeight) {
var $rowCt = $('<div class="img-row"></div>')
$.each(this.rowList, function(idx, imgInfo) {
var $imgCt = $('<div class="img-box"></div>')
var $img = $(imgInfo.target)
$img.height(newRowHeight)
$imgCt.append($img)
$rowCt.append($imgCt)
})
this.$ct.append($rowCt)
},
getImgUrls: function(num) {
var color, width, height, url = []
for(var i = 0; i < num; i++) {
color = Math.random().toString(16).substring(2,8)
width = Math.floor(Math.random() * 100 + 50)
height = Math.floor(Math.random() * 30 + 50)
url.push("https://placehold.it/" + width + "x" + height + "/" + color + "/fff")
}
return url
}
}
new Barrel($(".img-preview"))
</script>
</body>
</html>
