OOP 指什么？有哪些特性
面向对象编程（Object Oriented Programming)
面向对象编程的目的是：
1.改善可读性
2.提升复用性
原则：开放封闭原则
1.对于扩展是开放的(Open for extension)。当应用的需求改变时，我们可以对模块进行扩展，使其具有满足那些改变的新行为。
2.对于修改是关闭的(Closed for modification)。对模块进行扩展时，不必改动模块的源代码或二进制代码。
特性：
1.封装: 将客观的事物封装成抽象的类，类一般被指派代表一类具有共同属性的事物，也可能具有相应的一些功能，而这些功能的具体实现是不被暴露出来的，用户只能接触到一些”接口“，这些接口告知用户可以使用什么样的功能，却无法探知里面的内容。类似一个黑盒操作模型。封装后的类可以具有更灵活的组合使用方式以及高复用性，提高了开发的效率。
2.继承: 继承可以让某个类型的对象获得另一个类型的属性与方法，而不需要再次手动编写属于自己的同样的属性/方法。使用现有的类，我们可以对这些方法进行拓展。通过继承创建新的类称为子类或派生类，被继承的类称为基类，（父类，超类），继承的过程，是从一般到特殊的过程。实现继承我们可以通过继承和组合实现，继承概念的实现方式有两类，实现继承和接口继承，实现继承是直接使用父类的属性和方法，而无需额外的编码能力，接口继承仅仅继承了属性和方法的名称，但子类需要去对其提供实现的能力。
3.多态: 对于同一个类，在不同的状态下，可能会做出不同的反应，也就是说在内部结构里进行的操作不同，但是都通过相同的方式予以调用。
如何通过构造函数的方式创建一个拥有属性和方法的对象?
function People(name,age){
this.name = name
this.age = age
People.prototype.say = function(){
console.log('i am '+this.name)
}
}
var people = new People('jirengu',20) //People{name:'jirengu',age:20}
people.say() //i am jirengu
prototype 是什么？有什么特性
每个函数都有一个prototype属性，这个属性是指向一个对象的引用，这个对象称为原型对象，原型对象包含函数实例共享的方法和属性，将函数用作构造函数调用（使用new操作符调用）的时候，新创建的对象会从原型对象上继承属性和方法。
画出如下代码的原型图
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('前端');
原型链.png
创建一个 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(){
console.log(name+' can run')
}
Car.prototype.stop = function(){
console.log(name+' can stop')
}
Car.prototype.getStatus = function(){
console.log(this.status)
}
}
var car = new Car('Audi','white','ok') //Car {name: "Audi", color: "white", status: "ok"}
car.run() //Audi can run
car.stop() //Audi can stop
car.getStatus() //OK
创建一个 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, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html {
height: 5000px;
}
</style>
</head>
<body>
<script>
function GoTop(selector){
var btn = document.createElement('button');
btn.style.cssText='background-color:black;width:50px;height:50px;position:fixed;right:50px;bottom:50px;outline:none;border:none;cursor:pointer;color:white;';
btn.innerText = '回到顶部';
btn.addEventListener('click',function(){
window.scrollTo(0,0)
})
document.querySelector(selector).appendChild(btn);
this.ct = document.querySelector(selector);
this.target = btn;
this.bindEvent = function(event,Fn){
btn.addEventListener(event,Fn);
}
this.createNode = function(nodeName){
var node = document.querySelector(selector).appendChild(document.createElement(nodeName));
return node
}
}
var goTop = new GoTop('body');
</script>
</body>
</html>
网友评论