面向对象思想

这段时间看了下构造函数的使用和面向对象编程实现，特地看了几天前人的博客。在这总结下

OOP指什么？

OPP OOP全称（Object Oriented Programming），即面向对象编程；
举一个简单的例子。面对对象和面对过程的区别：
好比做一件事
面向过程是：如何去做这件事,改怎么做，然后一个人埋头去做
面向对象时：该让谁来做？,然后这个”谁”就是对象，他要怎么做就是他自己的事，反正最后一群对象合力把事情做好就行。

---

面对对象的三大特性

1.继承

function person(age,name){
		this.age=age;
		this.name=name;
		this.height=190;
		console.log("获取姓名:"+this.name+",获取年龄"+this.age+"岁")
	}
	var p1=new person(12,"acorn");
	console.log(p1.height)
	这里创建p1 对象的时候只传入了年龄和名字。但是仍然可以获取person.height的信息。

2.封装

//面向对象
	function person(name,age){
		console.log("获取姓名:"+name+",获取年龄"+age+"岁")
	}
	person("z-one",21);
//面向过程
	function person(age,name){
		this.age=age;
		this.name=name;
		this.height=190;
		console.log("获取姓名:"+this.name+",获取年龄"+this.age+"岁")
	}
	var p1=new person(12,"acorn");

多态

组件的引用和类集会涉及到其它许多不同类型的组件，而且引用组件所产生的结果依据实际调用的类型。

---

通过构造函数的方式创建一个拥有属性和方法的对象?

function person(age,name){
		this.age=age;
		this.name=name;
		this.height=190;
		this.say=function(){
			console.log("获取姓名:"+this.name+",获取年龄"+this.age+"岁")
		}

	}
	var p1=new person(12,"acorn");
	p1.say()//获取姓名:acorn,获取年龄12岁

---

prototype 是什么？有什么特性

JavaScript中创建的每一个函数都有一个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('前端');

---

以下代码中的变量name有什么区别

function People (){
  var name = "饥人谷"
  this.name = "我";
}
People.name = "jscode";

People.prototype.name = "学前端";


这里第一个 var name = "饥人谷" 生成了一个局部变量.
第二个 this.name="我" 是一个实例对象。绑定在对象的实例上
第三个 People.name = "jscode"; 是People这个对象的静态属性。绑定在这个People上面
第四个 People.prototype.name = "学前端";  是在people的原型对象上添加一个name属性，以后用people为构造函数，构造出来的实例都会带有这个属性。

一个简单的构造函数

function car(name,color,status){
		this.name=name;
		this.color=color;
		this.status=status;
		this.run=function(){
			console.log("车上有空调，上车说把");
		};
		this.stop=function(){
			console.log("我的名字是:"+this.name+"  这车的颜色是："+this.color);
		};
		this.getStatus=function(){
			console.log("获取状态:"+this.status)
		}
	}

	var p1=new car("name","red","OK")

创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法

function GoTop($ct){
	this.ct=$ct
	this.target=$("<button>回到顶部</button>");
	this.creatNode=function(){
		this.ct.append($(this.target));
	};
	this.bindEvent=function(){
		this.target.on("click",function(){
			$(window).scrollTop(0);
		})
	};
	this.creatNode();
	this.bindEvent();
}
var go=new GoTop($("body"));

---

最后把自己以前写的轮播 用构造函数的方式写出来，不得不说的确好用

轮播
轮播(渐隐渐现)在线演示
轮播(操作DOM)在线演示
轮播(不操作DOM)在线演示

github地址

---

tab切换
在线演示
github地址

就先到这里吧。明天继续看原型链