面向对象

2017-04-25  本文已影响0人  青鸣

面向对象
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)

}

demo:

上一篇 下一篇

猜你喜欢

热点阅读