javascript面向对象编程之理解原型
我们知道面向对象的三大基本特征:封装、继承、多态,JavaScript的面向对象编程也不外呼围绕这三个特征来学习,js没有类是利用构造函数的原型来达到面向对象编程的效果。
因此第一篇来理解原型。
1、构造函数和普通函数有什么区别呢?
(1)普通函数
function animal(name) { var subname = name console.log(subname) }
animal(“smx”)
(2)构造函数
function Animal(name) { this.subname = name console.log(this.subname) }
new Animal(“smx”)
构造函数和普通函数都是属于函数,为了利于编程的阅读性和可维护性,通过在第一个字母A大写来区别于普通函数,这样也是为了和其它OOP语言的类保持一致。它们的唯一区别在于使用它们时调用方式不一样。普通函数直接函数名调用,构造函数通过new的方式来实例化调用。
2、构造函数实例化过程做了哪些工作?
(1)创建了一个新对象,实例化是产生了一个新的对象
(2)将构造函数的作用域付给了新建的实例对象(this指向了实例对象)
(3)执行构造函数中的代码
(4)返回实例对象
3、原型是怎样的?
我们了解了构造函数,实例对象,那接下里就来解析原型,每个函数都有一个prototype属性,通过构造函数创建的每个实例对象也有一个属性指向了prototype属性,所以通过构造函数的prototype可以定义让所以实例对象共享的函数和数据,这样达到数据的封装和抽象,不用每个实例对象都创建一个相同功能的函数,造成代码的冗余。如下
function Animal(name) { this.subname = name console.log(this.subname) } Animal.prototype.sayName =function () { console.log(this.subname) } var dog = new Animal('dog') dog.sayName(); var cat = new Animal('cat') cat.sayName()
上面的代码的展示了各个对象之间的关系
4、怎么检测属性来自何地?
首先我们要知道读取属性的搜索顺序,在创建实例对象后,读取属性先搜索实例对象里的属性,然后再搜索原型对象里的属性,所以就可能出现实例对象的属性会覆盖原型对象里的属性。
这里有3个方法可以做到, hasOwnProperty, hasPrototypeProperty, in
- hasOwnProperty 检测实例对象里是否存在该对象,若存在则返回true
- hasPrototypeProperty 检测原型对象里是否存在该对象,若存在返回 true,这里需注意如果原型对象属性被覆盖,此时返回的始终是false
- in,无论存在于实例对象还是原型,都将返回true