OOP 指什么？有哪些特性
Object-oriented programming 面向对象编程；
-
OOP 是一种编程模式，这种模式将数据封装成对象，采用操作对象的形式来编程；
JS 是一种非常注重 OOP 的语言，它遵循 prototype 的方式，而不是传统 C 系语言的 class 模型 -
特性
- 类与对象：类的定义包含了数据的形式以及对数据的操作。对象是类的实例。
- 封装性：封装是通过限制只有特定类的对象可以访问这一特定类的成员，而它们通常利用接口实现消息的传入传出
- 继承性：，在某种情况下，一个类会有“子类”。子类比原本的类（称为父类）要更加具体化，当一个类从多个父类继承时，我们称之为“多重继承”
- 多态：多态（Polymorphism）是指由继承而产生的相关的不同的类，其对象对同一消息会做出不同的响应
- 抽象性：抽象（Abstraction）是简化复杂的现实问题的途径，它可以为具体问题找到最恰当的类定义，并且可以在最恰当的继承级别解释问题
如何通过构造函数的方式创建一个拥有属性和方法的对象?
function Person(name, age) {
this.name = name
this.age = age
this.say = function(){
console.log('Hello ' + this.name);
}
}
var s = new Person('tom', '20')
s.say();
prototype 是什么？有什么特性
prototype（原型），每一个 JS 对象都有原型，原型是一个对象，所有的 JS 对象都从原型链里面继承属性和方法
- 字面量创建对象的原型链
var a = {
a: 1
}
// 原型链 a ---> Object.prototype ---> null
var b = ['hello', 'world']
// 原型链 b ---> Array.prototype ---> Object.prototype ---> null
function fn() {
return 2
}
// 原型链 fn ---> Function.prototype ---> Object.prototype ---> null
- 构造函数（constructor）创建对象的原型链
var Test = function() {
this.name = 'Tuuu'
}
Test.prototype = {
call: function(){
console.log(this.name)
}
}
var init = new Test()
init
// 原型链第一层指向'构造函数.prototype'
// 原型链 init ---> Test.prototype(构造函数.prototype) ---> Object.prototype ---> null
-
Object.createES5 的语法，可以快速创建原型链
var a = {
a: 1
}
// 原型链 a ---> Object.prototype ---> null
var b = Object.create(a);
// 原型链 b ---> a ---> Object.prototype ---> null
var c = Object.create(b);
// 原型链 c ---> b ---> a ---> Object.prototype ---> null
var d = Object.create(null);
// 原型链 d ---> null
画出如下代码的原型图
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('前端');
p1 ---> People.prototype ---> Object.prototype ---> null
p1 ---> People.prototype ---> Object.prototype ---> null
创建一个 Car 对象，拥有属性name、color、status；拥有方法run，stop，getStatus
var Car = function(name, color, status){
this.name = name
this.color = color
this.status = status
}
Car.prototype = {
run: function(){
console.log('Run')
},
stop: function(){
console.log('Stop')
},
getStatus: function(){
console.log(this.status)
}
}
创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法
```
1\. `ct`属性，GoTop 对应的 DOM 元素的容器
2\. `target`属性， GoTop 对应的 DOM 元素
3\. `bindEvent` 方法， 用于绑定事件
4 `createNode` 方法， 用于在容器内创建节点
```
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>面向对象编程</title>
<style>
.container {
height: 1500px;
}
.goTop {
font-size: 20px;
position: fixed;
right: 30px;
bottom: 20px;
cursor: pointer;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="container">
顶部
<div class="goTop hide"></div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var GoTop = function(ct, target){
this.ct = ct;
this.target = target;
this.bindEvent();
this.createNode();
}
GoTop.prototype = {
bindEvent: function(){
var that = this;
// 滚动事件
$(window).scroll(function(){
if ($(window).scrollTop() > window.innerHeight) {
that.target.removeClass('hide');
} else {
that.target.addClass('hide');
}
})
//点击事件
that.target.on('click', function(){
$(window).scrollTop(0);
console.log(1)
})
},
// 创建节点
createNode: function(){
this.target.html('<span>回到顶部</span>');
}
}
var gotop1 = new GoTop($('.container'), $('.goTop'));
</script>
</body>
</html>
网友评论