浅谈JavaScript的继承

我想我的JavaScript的基本语法基础掌握的差不多了,现在没时间,毕竟那么多考试等着我。等到寒假我就把犀牛书过一遍。

本来就有那么多考试,但是我还是忍不住写点JavaScript的代码。我认为我的基础差不多了,我就把那本《JavaScript设计模式》拿出来看,我之前是看不懂的。

然后我想我现在应该看得懂了吧。就特意找了继承这一章看一看。

——————————————————————我是厉害的分割线————————————————————————————————————————

只能说勉强能看懂。

后来结合阮一峰的关于继承的博客懂了不少,我发现这本书真是好东西。

虽然前辈说的已经很棒了,但是这本书说了前辈没说的,当然前辈也说了这本书没说的,当然我估计JS还有别的继承方式,在这就不列举了。

——————————————————————我是厉害的分割线————————————————————————————————————————

总结一下几种继承方式

一、类式继承(来自书中翻译)

用call或者apply函数来继承方法。

引用前辈的例子:

function Animal(){
    this.species = "动物";
  }
function Cat(name,color){
    this.name = name;
    this.color = color;
  }
function Cat(name,color){
    Animal.apply(this, arguments);
    this.name = name;
    this.color = color;
  }
  var cat1 = new Cat("大毛","黄色");
  alert(cat1.species); //动物    by:阮一峰

然后继承prototype的属性

Cat.prototype = new Animal();
  Cat.prototype.constructor = Cat;
  var cat1 = new Cat("大毛","黄色");
  alert(cat1.species); // 动物   by:阮一峰

为什么不直接赋值呢,因为是引用,改变子类的prototype会改变父类的prototype。

不过这样实例Anima对象,在这里没问题,但是如果实例的对象很大,就有点得不偿失。

就引进了新的方法。

用一个新对象来过渡,代码如下:

var F = function(){};
  F.prototype = Animal.prototype;
  Cat.prototype = new F();
  Cat.prototype.constructor = Cat;// by:阮一峰

然后前辈把它变成了一个函数,我之前就在书上看到了。我觉得书上写的更好

function extend(subClass,superClass){
    var F=function(){};
    F.prototype=superClass.prototype;
    subClass.prototype=new F();
    subClass.prototype.constructor=subClass;
//第二段
    subClass.superclass=superClass.prototype;  //1
    if(superClass.prototype.constructor==Object.prototype.constructor){
        superClass.prototype.constructor=superClass;
    }
}

然后我没看懂第二段是什么意思,书上说的太抽象,后来我看了前辈的博客又看了一遍书,看懂了。

是为了弱化子类和父类的耦合,同时确保constructor对应正确的位置,在书的p43,我往前看了看发现每个继承只要prototype变了,constructor就要设置一下。

我查了相关资料这个属性到底有什么用。见文章底。我们继续说继承。

这种类式继承说完了,我们来说说原型式继承。

//原型式继承测试
var Person={
  name:‘test‘,
  getName:function(){
    return this.name;
  }
}

var a1=clone(Person);
alert(a1.getName());
a1.name=‘love~‘;
alert(a1.getName());

这个clone函数是什么了

  function clone(object){
  function F(){};
  F.prototype=object;
  return new F();
}
  

就是创建了一个空对象,把空对象的prototype引向父类。

返回一个实例的对象,然后测试的时候是把a1对象赋值为返回的对象F。

看完真的好佩服前人的智慧。

前辈博客还有好几个别的方式,浅拷贝,深拷贝,以前看过类似的在这里就不在多说了,可以到前辈的博客里自己看。

——————————————————————我是厉害的分割线————————————————————————————————————————

最后说说constructor的作用。

知乎帮了我很大的忙。这里是余晓珥知乎回答

var a,b;
(function(){
  function A (arg1,arg2) {
    this.a = 1;
    this.b=2;
  }

  A.prototype.log = function () {
    console.log(this.a);
  }
  a = new A();
  b = new A();
})()
a.log();
// 1
b.log();
// 1

通过以上代码我们可以得到两个对象,a,b,他们同为类A的实例。因为A在闭包里,所以现在我们是不能直接访问A的,那如果我想给类A增加新方法怎么办?

a.constructor.prototype.log2 = function () {
  console.log(this.b)
}

a.log2();
// 2
b.log2();
// 2

然后后面涉及到正则,我要抽时间好好看看,写个博客。

——————————————————————我是厉害的分割线————————————————————————————————————————

最后,《JavaScript设计模式》这本书真的是好书。前辈的博客是好东西,知乎是好东西,谷歌是好东西……

时间: 2024-08-05 19:13:10

浅谈JavaScript的继承的相关文章

浅谈JavaScript中继承的实现

  谈到js中的面向对象编程,都有一个共同点,选择原型属性还是构造函数,两者各有利弊,而就片面的从js的对象创建以及继承的实现两个方面来说,官方所推荐的是两个相结合,各尽其责,各取其长,在前面的例子中,我已就在JavaScript中对象创建的方法做了一些总结,下面就其继承来道说一二:   1:原型链继承: 每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象内部的指针(默认的原型,所有默认类型都继承了Object,而这个继承也是用过原型链实现) fu

浅谈javascript继承【读javascript设计模式第四章节继承有感】

javascript继承,无任是类式继承,原型式继承还是渗元式继承都是通过不同方法去围绕着prototype转,简单分析下三种不同继承方法是如何围绕prototype转的 一:类似继承,先上关键代码 function extend(subClass,supClass){ var fn = function(){}; fn.prototype = supClass.prototype; subClass.prototype = new fn(); subClass.prototype.constr

《浅谈JavaScript系列》系列技术文章整理收藏

<浅谈JavaScript系列>系列技术文章整理收藏 1浅谈JavaScript中面向对象技术的模拟 2浅谈javascript函数劫持[转自xfocus]第1/3页 3浅谈javascript 面向对象编程 4老鱼 浅谈javascript面向对象编程 5浅谈javascript的数据类型检测 6浅谈Javascript嵌套函数及闭包 7根据一段代码浅谈Javascript闭包 8浅谈JavaScript编程语言的编码规范 9浅谈Javascript面向对象编程 10浅谈JavaScript

浅谈javascript的原型及原型链

浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为该函数创建一个prototype属性,指向该函数的原型对象.实例对象是不会拥有该属性的.默认情况下,该原型对象也会获得一个constructor属性,该属性包含一个指针,指向prototype属性所在的函数. Person.prototype.constructor===Person [[proto

浅谈 JavaScript 编程语言的编码规范

对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编码规范也往往被轻视,开发过程中修修补补,最终也就演变成为后续维护人员的恶梦.软件存在的长期价值直接与编码的质量成比例.编码规范能帮助我们降低编程中不必要的麻烦.而 JavaScript 代码是直接发送给客户浏览器的,直接与客户见面,编码的质量更应该受到关注. 本文浅谈 JavaScript 编程中关

浅谈javascript单体【读javascript设计模式第五章节单体有感】

单体,整个运行环境就独有一份,最简单的一种单体就是一个把所有属性和方法都集中在一起的对象,区别于一般的字面量对象,一般字面量对象是对一个物体的描述,集合该物体所具有的一些属性和方法,而单体则包含更多的些逻辑在里面,单体的好处有,划分命名空间,如果用来作为网页包装器,可以使得页面所有变量都封装在一个对象里,大幅度减小网页里的全局变量, 代码如: common.js (function(wz){ $.extend({ init:function(){ var self = this; this.bi

浅谈javascript函数劫持

http://www.xfocus.net/articles/200712/963.html 浅谈javascript函数劫持 文章提交:hkluoluo (luoluonet_at_hotmail.com) by luoluo on 2007-11-30 luoluonet_at_yahoo.cn http://www.ph4nt0m.org 一.概述 javascript函数劫持,也就是老外提到的javascript hijacking技术.最早还是和剑心同学讨论问题时偶然看到的一段代码,大

浅谈JavaScript中的原型模式

在JavaScript中创建对象由很多种方式,如工厂模式.构造函数模式.原型模式等: <pre name="code" class="html">//工厂模式 function createPerson(name,age,job) { var o = new Object; o.name = name; o.age = age; o.job = job; o.sayName = function() { alert(this.name); } retur

浅谈JavaScript运行机制

浅谈JavaScript运行机制 ? 想要了解一门语言,最好的办法就是了解它的运行机制.掌握了运行机制,能够让我们在开发中少走许多弯路,写出高质量的代码.本文简单介绍什么是JavaScript的运行机制,给刚刚接触JavaScript的小白一个初步的了解,为将来打好基础. 一.JavaScript 代码运行分两个阶段: 1.预解析---把所有的函数定义提前,所有的变量声明提前,变量的赋值不提前 2.执行---从上到下执行(按照js运行机制) 二.JavaScript运行机制的特点 1.JavaS