什么是面对对象
面向对象程序设计(英语:Object-oriented programming,缩写:OOP)是种具有对象概念的程序编程范型,同时也是一种程序开发的抽象方针。它可能包含数据、属性、代码与方法。对象则指的是类的实例。它将对象作为程序的基本单元,将程序和数据封装其中,以提高软件的重用性、灵活性和扩展性,对象里的程序可以访问及经常修改对象相关连的数据。在面向对象程序编程里,计算机程序会被设计成彼此相关的对象 -----wikipedia
面对对象的语言有个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象,但是在ECMAScript中没有类的概念,因此它的对象与其他语言的也不太一样。
面对对象具有这么几个特性
1.封装性
隐藏了某一方法的具体执行步骤,取而代之的是通过消息传递机制传送消息给它。将多个功能属性打包在一起,留下接口,需要使用时,直接调用接口,提高代码重用性
2.继承性
父类会拥有子类,子类比父类更加具体化,子类会继承父类的属性和方法,且有可能有属于自己的属性和方法。
比方说“狗”这个类下面会有“牧羊犬”和“金毛”这两个子类,“牧羊犬”和“金毛”并不相同,有着自己特别的地方,但是它们都共同拥有“狗”这个父类的特征,这就是i继承
3.多态性
对于同一个方法或者功能,不同的子类的表现不一样。
同为“动物的叫声”,“狗”和“猫”的叫声是不一样的,但它们却是同一个“叫”的行为,这就是多态。
如何通过构造函数的方式创建一个拥有属性和方法的对象?
Object和Array是原生的构造函数,同时,我们也可以创建自定义的构造函数
function Person(name,age) {
this.name = name
this.age = age
this.sayName = function() {
alert(this.name)
}
}
这样我们就定义了一个简单的构造函数
要用这个构造函数创建新实例,必须使用new操作符,以new调用构造函数时,会经历下面4个步骤:
1.创建一个空对象作为this
2.空对象的__proto__
指向构造函数的prototype
3.运行构造函数
4.返回this(如果构造函数没有return)
let person1 = new Person('Jack',20)
let person2 = new Person('Tom',29)
这里就用Person创建了两个新实例person1和person2,这两个实例都有一个constructor属性,指向Person
同时这两个实例里都有属性name和age,和一个方法sayName
prototype 是什么?有什么特性?
无论什么时候,只要创建了一个函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象
同时也是通过调用构造函数而创建的对象实例的原型对象
它有什么作用特点呢?
1.所有的对象实例共享它包含的属性和方法
function Person() {}
Person.prototype.name = 'Jack'
Person.prototype.age = 27
Person.prototype.sayName = function() {
alert(this.name)
}
let person1 = new Person()
console.log(person1.name) //'Jack'
console.log(person1.age) //27
person1.sayName() //'Jack'
这里构造函数是空的,new出来的person1实例也具有name、age和sayName这些属性和方法,因为prototype是所有实例共享的
2.所有的原型对象都会自动获得一个construction属性,这个属性是一个指向prototype属性所在函数的指针
在本例中,Person.prototype.construction === Person
3.关于1中的共享问题,当调用构造函数创建一个实例后,该实例的内部将包含一个属性__proto__
,这个属性包含一个指针,指向构造函数的原型对象prototype,这也是多个对象实例共享原型所保存的属性和方法的基本原理
4.如果我们在实例中添加一个属性,该属性与实例原型中的一个属性同名,那么该属性就会屏蔽原型中的属性,原因是属性的访问和调用都是先从实例中开始的
function Person() {}
Person.prototype.name = 'Jack'
Person.prototype.age = 27
Person.prototype.sayName = function() {
alert(this.name)
}
let person1 = new Person()
console.log(person1.name) //'Jack'
person1.name = 'Tom'
console.log(person1.name) //'Tom'
画出如下代码的原型图
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('前端');
创建一个 Car 对象,拥有属性name、color、status;拥有方法run,stop,getStatus
function Car(name,color,status) {
this.name = name
this.color = status
this.status = status
} //构造函数
Car.prototype = { //原型
constructor: Car,
run: function() {
//do something..
},
stop: function() {
//do somthing
},
getStatus: function() {
alert(this.status)
}
}
let car = new Car('Porsche','Black',status) //new一辆新车
创建一个 GoTop 对象,当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素,点击页面滚动到顶部。
http://js.jirengu.com/tofoputuya/2/edit