JavaScript学习笔记-原型继承

JavaScript基于原型的编程语言，本身并不包含内置的类实现。但是可以通过Javascript模拟出类

类
JavaScript中有构造函数和New运算符。构造函数用来实例对象和初始化属性。任何JavaScript函数都可以用作构造函数，构造函数必须使用new运算符作为前缀来创建新的实例

JavaScript要模拟一个类可以直接使用函数function

1
var Person = function(name){
2
this.name = name;
3
}
4

5
//实例化Person
6
var alice = new Person('alice');
7
console.log(alice.name);
这里需要注意的this关键字， new运算符会改变函数的执行上下文，同时改变return的行为。当使用new运算符来调用构造函数时，执行上下文this从全局对象编程一个空的上下文，这个上下文代表新生成的实例。因此this指向当前创建的实例。

所以一下代码执行会出现undefined

1
var bob = Person('bob');
2
console.log(bob.name);
原型
JavaScript本身是基于原型的编程语言，原型的作用:区别类和实例

01
var Animal = function(){}
02

03
Animal.run = function(){
04
    console.log('Animal run')
05
}
06

07
Animal.prototype.breath = function(){
08
   console.log('animal breath');
09
}
10

11
Var Dog = function(){}
12

13
//Dog继承自Animal
14
Dog.prototype = new Animal();
15

16
Dog.prototype.wag = function(){
17
   console.log('dog wag');
18
}
19

20
var dog = new Dog();
21
dog.wag();
22
dog.breath();//继承的属性
输出：

1
dog wag
2
animal breath
那么通过类的prototype定义的方法或者属性就可以叫做所有实例的方法或属性，而其他的方法和属性就是类本身的方法和属性类比java类中的静态变量

这里对下面一些东西的叫法约定一下

通常按照个人习惯

构造函数/匿名函数

1
var Person = function(name){
2
this.name=name;
3
}
函数/类

1
function Person(){}
对象/实例

1
var person = { name:'zhangsan',易做图:'male'}
原型继承继承是的什么？
还是上面关于Animal和Dog的例子，我们做一些改造

01
var animal = {
02
breath:function(){console.log('animal breath!')},
03
};
04

05
var Dog = function(){}
06

07
//Dog继承自animal
08
Dog.prototype = animal;
09

10
Dog.prototype.wag = function(){
11
console.log('dog wag');
12
}
13

14
var dog = new Dog();
15
dog.wag();
16
dog.breath();//继承的属性
结果和上面的一样

在一个例子中我们使用 Dog.prototype = new Animail; 这个例子中我们使用的是Dog.prototype = animal

区别在于第一个例子中的Animal是一个匿名类，通过调用new运算符调用其构造函数返回了一个animal实例，而第二个例子中animal本身就已经是一个实例/对象。这就是之前提到的new运算符的作用。

所以一个类的如果要继承另一个类那么就需要继承那个类的实例而不是类本身（Function），当然我们可以试一下直接使用Dog.prototype=Animal，结果就是当调用dog.breath();时直接返回的是一个Function对象，无法达到共享属性的意义。

原型对象就是一个“模板”，定义在原型上的属性被用来初始化一个新的对象。任何对象都可以作为一个对象的原型对象，以此来共享属性。

补充：web前端 , JavaScript ,