文档章节

JavaScript学习笔记-原型继承

墨鱼ID
 墨鱼ID
发布于 2012/09/06 13:09
字数 748
阅读 1203
收藏 46



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

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

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

   

var Person = function(name){
   this.name = name;
}

//实例化Person
var alice = new Person('alice');
console.log(alice.name);

     这里需要注意的this关键字, new运算符会改变函数的执行上下文,同时改变return的行为。当使用new运算符来调用构造函数时,执行上下文this从全局对象编程一个空的上下文,这个上下文代表新生成的实例。因此this指向当前创建的实例。

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

var bob = Person('bob');
console.log(bob.name);

原型   

 JavaScript本身是基于原型的编程语言,原型的作用:区别类和实例

var Animal = function(){}

Animal.run = function(){
    console.log('Animal run')
}

Animal.prototype.breath = function(){
   console.log('animal breath');
}

Var Dog = function(){}

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

Dog.prototype.wag = function(){
   console.log('dog wag');
}

var dog = new Dog();
dog.wag();
dog.breath();//继承的属性

输出:

dog wag
animal breath

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

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

通常按照个人习惯

构造函数/匿名函数

var Person = function(name){
  this.name=name;
}

函数/类

function Person(){}

对象/实例

var person = { name:'zhangsan',sex:'male'}

原型继承继承是的什么?

还是上面关于Animal和Dog的例子,我们做一些改造

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

var Dog = function(){}

//Dog继承自animal
Dog.prototype = animal;

Dog.prototype.wag = function(){
   console.log('dog wag');
}

var dog = new Dog();
dog.wag();
dog.breath();//继承的属性

结果和上面的一样

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

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

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

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

   


© 著作权归作者所有

共有 人打赏支持
墨鱼ID
粉丝 21
博文 13
码字总数 10955
作品 0
成都
程序员
加载中

评论(6)

墨鱼ID
墨鱼ID

引用来自“魔术师007”的评论

引用来自“石林红”的评论

引用来自“leehark”的评论

如果不同的类继承同一个对象原行,那么他们共享同一个属性么?

是的,而且你在你修改其中一个对象,整个原型链都改变……

耦合性这么大

一般做继承的啥时候是将父类作为参数,并将父类的原型拷贝一份后再继承
var Class = function(parent){

var klass = function(){

this.init.apply(this,arguments);

}

if(parent){

var subclass = function(){};
subclass.prototype = parent.prototype;
klass.prototype = new subclass;

}

klass.prototype.init = function(){};
return klass


这样对parent原型的修改就不会影响到实例
魔术师007
魔术师007

引用来自“石林红”的评论

引用来自“leehark”的评论

如果不同的类继承同一个对象原行,那么他们共享同一个属性么?

是的,而且你在你修改其中一个对象,整个原型链都改变……

耦合性这么大
q
qianggg
a•••••••
述而不作
述而不作

引用来自“leehark”的评论

如果不同的类继承同一个对象原行,那么他们共享同一个属性么?

是的,而且你在你修改其中一个对象,整个原型链都改变……
墨鱼ID
墨鱼ID

引用来自“leehark”的评论

如果不同的类继承同一个对象原行,那么他们共享同一个属性么?

对原型的修改对所有的实例都会产生影响
leehark
leehark
如果不同的类继承同一个对象原行,那么他们共享同一个属性么?
JavaScript 中的继承:ES3、ES5 和 ES6

选择一种继承方式 JavaScript 是一门动态语言,动态意味着高灵活性,而这尤其可以体现在继承上面。JavaScript 中的继承有很多种实现方式,可以分成下面四类: Mixin 模式,即属性混入,从一个...

天方夜
07/04
0
0
《javascript语言精粹》学习笔记1

作为一个前端的学习者,之前由于时间赶且懒的特性,没有好好的学习一下js的特性,只看了w3cschool的基础教程,知道语法后就用起了jQuery框架,js的很多基础完全没有接触理解。这段时间了解到...

高霸天
2013/03/17
0
0
用通俗易懂的语言介绍JavaScript原型

原型(prototype)是每个JavaScript开发人员必须理解的基本概念,本文的目标是通俗而又详细地解释JavaScript的原型。如果你读完这篇博文以后还是不理解JavaScript的原型,请将你的问题写在下...

gsbhzh
2014/10/29
0
0
[Javascript]继承机制的设计思想

作者: 阮一峰 日期: 2011年6月 5日 我一直很难理解Javascript语言的继承机制。 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(...

亭子happy
2012/09/29
0
3
面向对象的JavaScript——类

在java里,我们定义类的时候用的是class关键字,但是JavaScript中class是保留字,另有用途,所以我们要采用其他的方法来定义JavaScript中的类。 定义类 利用JavaScript中的function关键字,类...

小微
2012/09/21
0
3

没有更多内容

加载失败,请刷新页面

加载更多

Snackbar源码分析

目录介绍 1.最简单创造方法 1.1 Snackbar作用 1.2 最简单的创建 1.3 Snackbar消失的几种方式 2.源码分析 2.1 Snackbar的make方法源码分析 2.2 对Snackbar属性进行设置 2.3 Snackbar的show显示...

潇湘剑雨
30分钟前
1
0
分布式作业系统 Elastic-Job-Lite 源码分析 —— 作业数据存储

分布式作业系统 Elastic-Job-Lite 源码分析 —— 作业数据存储 摘要: 原创出处 http://www.iocoder.cn/Elastic-Job/job-storage/ 本文基于 Elastic-Job V2.1.5 版本分享 1. 概述 本文主要分享...

DemonsI
36分钟前
1
0
jmockit demo

1、@Mocked,标识一个指定的class的实例或被测对象的参数被Mock掉。 2、@Capturing,标识一个被Mock的对象,从该对象派生的子类也被Mock了。 3、@Injectable,标识只有一个指定的被测对象的内...

我的老腰啊
50分钟前
1
0
内容换行

用 <textarea>13611112222 这里想换行 13877779999</textarea><textarea>13611112222 13877779999</textarea>...

小黄狗
51分钟前
1
0
学习设计模式——单例模式

1. 认识单例模式 1. 定义:一个类中仅有一个实例,并提供一个访问它的全局访问点。 2. 结构:仅一个Singleton类,其中包含一个static类变量,而类变量的类型就是Singleton类,而且Singleton...

江左煤郎
58分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部