面向对象
2017-11-02 本文已影响0人
进击的前端_风笑影
1： OOP 指什么？有哪些特性
-
面向对象程序设计（英语：Object-oriented programming，缩写：OOP）是种具有对象概念的程序编程范型，同时也是一种程序开发的抽象方针。它可能包含数据、属性、代码与方法。对象则指的是类的实例。它将对象作为程序的基本单元，将程序和数据封装其中，以提高软件的重用性、灵活性和扩展性，对象里的程序可以访问及经常修改对象相关连的数据。在面向对象程序编程里，计算机程序会被设计成彼此相关的对象。
-
原则
对于扩展是开发的（open for extension），当应用的需求改变时，我们可以对模块进行扩展，使其满足新的需求
对于修改是封闭的（closed for modification），对模块行为进行扩展时，不必改动模块源代码或者二进制代码
面向对象具有封装性，继承，多态等特性：
- 封装：将相同属性、方法、逻辑关系的模块放在一起，通过限制只有特定类的对象可以访问这一特定类，通常利用接口实现消息的传入传出
- 继承：在某种情况下，一个类会有“子类”。子类比原本的类（称为父类）要更加具体化，子类会继承父类的属性和行为，并且也可包含它们自己的。
- 多态：是指由继承而产生的相关的不同的类，其对象对同一消息会做出不同的响应
2： 如何通过构造函数的方式创建一个拥有属性和方法的对象?
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.showName = function (){
console.log(this.name)
}
var p1 = new Person;
new一个对象发生了什么
创建了一个空对象 作为this
this.proto指向构造函数的prototype
运行构造函数
返回this（若构造函数没有return）
3： prototype 是什么？有什么特性
- 我们创建的每个函数都有一个prototype属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含所有实例共享的属性和方法。
- prototype就是通过调用构造函数而创建的那个对象实例的原型对象。通常我们可以将实例对象的公共属性和方法放在prototype对象中。好处是节省空间，当有很多对象时，不用每次有一个对象就去重复创建一份方法。
特性：
- 每个函数都有一个prototype属性，指向一个对象，叫做原型对象
- 所有对象都有proto
- 对象.proto=== 构造函数.prototype
- 访问一个对象的属性时，如果对象有这个属性，就获取到了，如果没有这个属性，则从proto里面去找，如果还是没有找到，则从原型对象prototype里的proto中去寻找。
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('前端');
Paste_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() {
this.status = "running";
console.log(this.status);
}
Car.prototype.stop = function() {
this.status = "stop";
console.log(this.status);
}
Car.prototype.getStatus = function() {
console.log(this.status);
}
var p1 = new Car("宝马","black","run");
p1.run();
p1.stop();
p1.getStatus();
6： 使用木桶布局实现一个图片墙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>木桶布局</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#img-preview {
width: 1000px;
margin: 0 auto;
}
.img-row:after {
content: "";
display: block;
clear: both;
}
.img-box {
float: left;
}
.img-line .img-box:first-child {
padding-left: 0;
}
</style>
<script type="text/javascript" src="js/index2.js" ></script>
<script>
window.onload = function (){
function Barrels(wrap){
this.wrap = wrap;
this.baseHeight = 100;
this.loadImg();
this.rowImg = [];
this.wrapWidth = parseInt(getStyle(wrap, 'width'));
}
Barrels.prototype = {
//加载图片
loadImg: function (){
//得到链接数组
var aUrls = this.getImgUrls(100);
for(var i=0; i<aUrls.length; i++){
var _this = this;
//想要得到图片的宽高，就要用new预加载
var oImg = new Image();
//图片对象加url
oImg.src = aUrls[i];
//图片加载完成后才能对它的宽和高进行操作
oImg.onload = function (){
var ratio = this.width/this.height
var imgInfo = {
target: this,
//new对象有width和height属性
width: this.width/this.height* _this.baseHeight,
height: _this.baseHeight,
ratio: ratio
};
//计算每一行容纳的imgInfo的个数
_this.render(imgInfo) ;
};
}
},
render: function (imgInfo){
console.log(imgInfo);
var rowWidth = 0;
var rowHeight = 0;
this.rowImg.push(imgInfo);
for(var i=0; i<this.rowImg.length; i++){
rowWidth = rowWidth + this.rowImg[i].width;
}
if(rowWidth > this.wrapWidth ){
console.log(rowWidth);
var lastImg = this.rowImg.pop();
rowWidth = rowWidth - lastImg.width;
console.log(rowWidth);
rowHeight = this.wrapWidth * this.baseHeight / rowWidth;
this.layout(rowHeight);
this.rowImg = [];
this.rowImg.push(lastImg);
}
},
layout: function (rowNewHeight){
console.log(rowNewHeight);
var imgRow = document.createElement('div');
imgRow.className = 'img-row';
console.log(this.rowImg);
this.rowImg.forEach(function (imgInfo, idx){
var imgCt = document.createElement('div');
imgCt.className = 'img-box';
var oImg = imgInfo.target;
oImg.style.height = rowNewHeight + 'px';
imgCt.appendChild(oImg);
imgRow.appendChild(imgCt);
});
this.wrap.appendChild(imgRow);
},
//获取图片的url
getImgUrls: function getImgUrls(num){
var imgColor, imgWidth, imgHeight, urls = [];
for(var i=0; i<num; i++){
//颜色色值转化为16进制
imgColor = Math.random().toString().substring(2,8);
//设置随机的宽度
imgWidth = Math.floor(Math.random()*150 + 50);
//设置随机的高度
imgHeight = Math.floor(Math.random()*30 + 50);
//将颜色宽高放入数组
urls.push('http://placehold.it/' + imgWidth + 'x' + imgHeight + '/' + imgColor + '/fff')
}
return urls;
}
}
var oWrap = document.getElementById('img-preview');
var barrels = new Barrels(oWrap);
//封装一个获取样式的函数
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
//非ie
return window.getComputedStyle(obj,false)[attr];
}
}
}
</script>
</head>
<body>
<div id="img-preview"></div>
</body>
</html>
