004.jpg
OOP
Object-oriented programming的缩写，即面向对象程序设计，其中两个最重要的概念就是类和对象。类只是具备了某些功能和属性的抽象模型，而实际应用中需要一个一个实体，也就是需要对类进行实例化，类在实例化之后就是对象。
特性
- 继承性：子类自动继承其父级类中的属性和方法，并可以添加新的属性和方法或者对部分属性和方法进行重写。继承增加了代码的可重用性。
- 多态性：子类继承了来自父级类中的属性和方法，并对其中部分方法进行重写。
- 封装性：将一个类的使用和实现分开，只保留部分接口和方法与外部联系。
创建对象
- 通过Object构造函数或对象字面量可以创建单个对象
//Object构造函数
var dog = new Object()
dog.name = '来福';
dog.age= 2;
dog.job = ' 看家 ';
dog.sayName =function(){
console.log(this.name+'汪汪')
}
//对象字面量
var dog ={
name = '来福',
age= 2,
job = ' 看家 ',
sayName =function(){
console.log(this.name+'汪汪')
}
}
缺点：为一个接口创建很多对象，会有大量重复代码产生
- 工厂模式
用函数来封装以特定接口创建对象的细节
function careateDog（name,age,job）={
var d = new Object();
o.name = '来福',
o.age= 2,
o.job = ' 看家 ',
o.sayName =function(){
console.log(this.name+'汪汪')
}
return o
}
缺点：无法知道一个对象的类型
- 构造函数模式
function Dog（name,age,job）={
this.name =name;
this.age= age;
this.job = job;
this.sayName =function(){
console.log(this.name+'汪汪')
}
}
var dog1 = new Dog('来福', '2', '看家')
var dog2 = new Dog('旺财', '5', '卖萌')
特点
没有显式的创建对象
直接将方法和属性赋值给了this对象
没有return语句
缺点
每个方法都要在实例上创建一遍
new 命令
使用new命令时，它后面的函数依次执行下面的步骤。
- 创建一个空对象，作为将要返回的对象实例。
- 将这个空对象的原型，指向构造函数的prototype属性。
- 将这个空对象赋值给函数内部的this关键字。
- 开始执行构造函数内部的代码。
原型模式
每个函数都有一个prototype 原型属性，这个属性是一个指针，指向一个对象
function Dog (){}
Dog.prototype.name ='来福';
Dog.prototype.=2;
Dog.prototype.='看家';
Dog.prototype..sayName =function(){
console.log(this.name+'汪汪')
}
var dog1 = new Dog()
dog1.sayName//'来福汪汪'
var dog2 = new Dog()
dog2.sayName//'来福汪汪'
原型对象.png
特点：让所有对象实例共享它所包含的属性和方法
当读取对象的某个属性时，都会进行一个搜索
- 搜索对象实例本身，搜到返回属性的值
- 搜不到时，继续搜索指针指向的原型对象
但是如果不能通过对象实例重写原型中的属性，如果实例和原型中一个属性重名，将无法访问原型中的这个属性。
构造函数模式和原型模式组合使用
function Dog(name,age,job){
this.name =name;
this.age= age;
this.job = job;
this.sayName =function(){
console.log(this.name+'汪汪')
}
}
Dog.prototype={
constructor:Dog,
sayName:function(){
console.log(this.name+'汪汪')
}
}
var dog1 = new Dog('来福', '2', '看家')
var dog2 = new Dog('旺财', '5', '卖萌')
dog1.sayName('来福')//来福汪汪
dog2.sayName('旺财')//旺财汪汪
构造函数：定义实例属性
原型模式：定义方法和共享属性
返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.ct{
height: 1200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="ct">
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function GoTop(ct){
GoTop.prototype.createNode = function () {
this.$target = $('<button>回到顶部</button>')
this.$target.css({
width: 100,
height: 30,
border: '1px solid #ccc',
position: 'fixed',
right: 50,
bottom: 50,
cursor: 'pointer'
})
ct.append(this.$target)
}
GoTop.prototype.bindEvent = function (win) {
this.$target.click(function () {
$(window).scrollTop(0)
})
}
GoTop.prototype.isShow = function (win) {
$(window).scroll(function () {
if($(window).scrollTop() === 0){
$('button').hide()
}else{
$('button').show()
}
})
}
this.createNode()
this.bindEvent()
this.isShow()
}
$ct = $('.ct')
new GoTop($ct)
</script>
</body>
</html>
继承
ECMAScript只支持实现继承,主要通过原型链来实现
原型链
原型对象.png
由图可知
- 每个构造函数都有一个原型对象
- 原型对象有一个指向构造函数的指针
- 实例内有指向原型对象的指针
如果我们让原型对象等于其他类型的实例时
原型链-1.png
层层递进，就构成了原型链
网友评论