面向对象
OOP 指什么?有哪些特性
“面向对象编程”(Object Oriented Programming,缩写为OOP)是将真实世界中各种复杂的关系,抽象为一个个对象,然后由对象之间的分工与合作,完成对真实世界的模拟。
其中有两个重要概念就是类和对象。“对象”是单个实物的抽象。通常需要一个模板,表示某一类实物的共同特征,然后“对象”根据这个模板生成。类就是具备一些共同的属性和方法的模板,而在编程中,我们实际需要一个存在的对象来处理我们的问题,于是将类实例化,就得到一个我们需要的对象。
特性:
1.继承性:JavaScript中一切皆对象,子对象会继承父对象的属性和方法,并且可以添加新的属性和方法,继承性使对象具有灵活性,代码的可重用性以及模块性等特点,容易维护和开发。
2.多态性:同一个父对象,有不同的子对象继承,对父对象的方法有不同功能的实现。
3.封装性:将属性和方法集成一个对象,对象之外可以使用这个对象方法,即接口。
2: 如何通过构造函数的方式创建一个拥有属性和方法的对象?
构造函数的写法就是一个普通的函数,但是有自己的特征和用法。通常首字母大写。
创建一个空对象作为this
this.proto
指向构造函数的prototype
运行构造函数
返回this
示例:
var Animal = founction(){
this.name = '动物'
}
animal = new Animal() //实例化一个对象
Object.create()
方法用于从原型对象生成新的实例对象,可以替代new
命令。
3.prototype 是什么?有什么特性
JavaScript的每个对象都继承另一个对象,后者称为“原型”(prototype)对象。只有null
除外,它没有自己的原型对象。
原型对象的作用,就是定义所有实例对象共享的属性和方法。这也是它被称为原型对象的含义,而实例对象可以视作从原型对象衍生出来的子对象。
通过构造函数生成实例对象时,会自动为实例对象分配原型对象。每一个构造函数都有一个prototype
属性,这个属性就是实例对象的原型对象。
Object.getPrototypeOf()
方法返回一个对象的原型。这是获取原型对象的标准方法。
特性:
1.原型对象上的所有属性和方法,都能被派生对象共享。这就是JavaScript继承机制的基本设计。
2.原型对象的属性不是实例对象自身的属性。只要修改原型对象,变动就立刻会体现在所有实例对象上。
3.当实例对象本身没有某个属性或方法的时候,它会到构造函数的prototype
属性指向的对象,去寻找该属性或方法。如果实例对象自身就有某个属性或方法,它就不会再去原型对象寻找这个属性或方法。
4:画出如下代码的原型图
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('前端');
5: 创建一个 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(this.name+'is running')
}
Car.prototype.stop = function(){
console.log(this.name+'was stopped')
}
Car.prototype.getStatus = function(){
console.log(this.status)
}
var car = new Car('audi','black','running')
car.status //running
car.getStatus() //running
6: 创建一个 GoTop 对象,当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素,点击页面滚动到顶部。拥有以下属性和方法
var GoTop = function(ct,target){
this.ct = ct
this.target = target
}
GoTop.prototype.bindEvent = function(target){
target.addEventLlistener('click',function(){
window.scroll(0,0)
})
}
GoTop.prototype.createNode = function(node){
return document.createElement(node)
}