JS面向对象与原型链继承

发表于 | 分类于 |

由于最开始是先接触Python的中面向对象，继承的语法以及思路开始的。之后当接触到了JavaScript的的面向对象语法时是觉得有些别捏的。JS本身是不提供class的实现的，而是基于原型链。

面向对象

1
2
3
4
5
6
7
8
9
10
function People(name){
    this.name = name
}

People.prototype.sayName = function(){
    console.log()
}

var p = new People("yangchenhao")
p.sayName()

当new一个函数时发生了三件事情

  1. 创建了一个空对象，把空对象的proto属性指向People.prototype
  2. 执行People函数，函数中的this代表这个刚创建的新对象
  3. 返回这个对象

对于第三步，如果构造函数中有return，分情况讨论。如果return的是基本类型，会忽略不计。如果return的是引用类型，则返回这个引用类型

原型图

Tips

任何函数都有.prototype这个属性，对应的值叫做原型对象，这个原型对象可以由被这个函数new的所有对象共享

继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function Dialog(target){
    this.target = target
}

Dialog.prototype.show = function(){
    console.log(this.target + ' show')
}

Dialog.prototype.hide = function(){
    console.log(this.target + ' hide')
}

var dialog = new Dialog('body')

dialog.show()

function Message(target, name){
    Dialog.call(this, target)   // Message构造函数中执行一遍Dialog函数构造过程
    this.name = name
}

Message.prototype = Object.create(Dialog.prototype) // 将Message.prototype中_proto_属性指向Dialog.prototype 相当于继承Dialog中的方法
Message.prototype.success = function(){
    console.log(this.name, ' success')
}

var msgBox = new Message('main', 'msg')
msgBox.show()
msgBox.success()

Dialog.call(this, target)的作用是: 执行函数 Dialog(target)，执行的过程中里面遇到 this 换成当前传递的 this

Object.create(Dialog.prototype)的作用是：创建一个空对象，空对象的proto等于 Dialog.prototype