刚学JS的时候听到过这样的一句话，万物皆对象，一直不是很理解，今天就把这一块好好的理一理
Object-oriented programming，缩写OOP，即面向对象程序设计，其中两个最重要的概念就是类和对象。类只是具备了某些功能和属性的抽象模型，而实际应用中需要一个一个实体，也就是需要对类进行实例化，类在实例化之后就是对象。
特性
- 继承性：子类自动继承其父级类中的属性和方法，并可以添加新的属性和方法或者对部分属性和方法进行重写。继承增加了代码的可重用性。
- 多态性：子类继承了来自父级类中的属性和方法，并对其中部分方法进行重写。
- 封装性：将一个类的使用和实现分开，只保留部分接口和方法与外部联系。
那么如何通过构造函数的方式创建一个拥有属性和方法的对象?呢？
例如下面的函数,我们就可以通过new来使用构造函数，让zhangxuan拥有Person的属性和方法，而不需要再去重新写一个zhangxuna的属性和方法
<script>
function Person(name, age){
this.name = name;
this.age = age;
this.sayName = function(){
console.log(this.name);
}
}
var zhangxuan = new Person('Byron', 25);
console.log(zhangxuan.name);
zhangxuan.sayName();
</script>
这就是构造函数，但是我们是否还能再简化一些？
在Person中，我们发现sayName这个方法zhangxuan也去使用了，然后在zhangxuan中重新写了一遍这个方法，现在创建一个对象没事，那么创建10000个的话是不是就会造成大量无用重复的代码，导致性能下降呢？那能否通过某些方法去借用sayName这个方法？
我们来看一下下面的这个图，我们明明没有创建一个叫做__proto__的方法啊，怎么会有个这个奇怪的东西呢？
Paste_Image.png
我们再做个实验
<script>
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
console.log(this.name);
}
var zhangxuan = new Person('Byron', 25);
console.log(zhangxuan.name);
zhangxuan.sayName();
</script>
我们可以发现，我使用了一个叫做prototype的方法创建了一个sayName的方法，那和之前的方法有什么不一样的地方呢
Paste_Image.png
我们通过控制台可以发现，sayName方法竟然跑到了之前所说的__proto__中去了，这样的话是不是就是借用了sayName方法，节约了资源呢
其实这个就是上述问题的解决办法
zhangxuan会先在本地查找是否有sayName这个方法，然后没有查询到，会通过__proto__去查找原型链上的方法，即Person.prototype.sayName，找到了以后就可以借用他了
通过__proto__和prototype能够构造一个叫做原型链的东西，就可以借用原型的方法，而不需要自己再去创建一个
Paste_Image.png
案例：
1.创建一个 Car 对象，拥有属性name、color、status；拥有方法run，stop，getStatus
<script>
function Car(name, color, status){
this.name = name;
this.color = color;
this.status = status;
}
Car.prototype.run= function(){
if(this.status== 'stop'){
console.log(this.name + ' is start running')
}
else{
console.log(this.name + ' is still running')
}
this.status = 'run';
}
Car.prototype.stop= function(){
if(this.status== 'stop'){
console.log(this.name + ' was stop')
}
else{
console.log(this.name + ' will be stop')
}
this.status = 'stop';
}
porsche = new Car('porsche', 'red', 'stop');
</script>
2. 创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法
a. ct属性，GoTop 对应的 DOM 元素的容器
b. target属性， GoTop 对应的 DOM 元素
c. bindEvent 方法， 用于绑定事件
d createNode 方法， 用于在容器内创建节点
测试地址：https://jirengu-inc.github.io/jrg-renwu8/homework/%E5%BC%A0%E8%BD%A9/jinjie-1.html
<head>
<meta charset="UTF-8">
<title>test</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
<style>
body{
padding: 0px;
margin: 0px;
height: 2000px;
background-color: grey;
}
</style>
</head>
<body>
<div id='main'></div>
<script>
var Gotop = function(ct, target){
this.ct = ct;
this.target = $('<div class="gotop">回到顶部</div>');
this.target.css({
position: 'fixed',
right: '100px',
bottom: '50px',
display: 'none',
padding: '10px',
cursor: 'pointer',
border: '1px solid',
borderRadius: '5px'
})
}
Gotop.prototype.creatNode = function(){
this.ct.append(this.target);
}
Gotop.prototype.bindEvent = function(){
var _this = this;
var $window = $(window);
$window.on('scroll', function(){
var $top = $window.scrollTop();
if($top > 100){
_this.target.css('display' , 'block');
}else{
_this.target.css('display' , 'none');
}
})
this.target.on('click', function(){
_this.ct.animate({
scrollTop: 0
})
})
}
var GOTOP = new Gotop($('body'));
GOTOP.creatNode();
GOTOP.bindEvent();
</script>
</body>
网友评论