1.利用call和apply,借助构造函数

fucntion P(){
this.name = "P";
}
fucntion C1(){
P.call(this);
}

  解释一下,P.call(this)的意思,就是将P的上下文指向C的上下文。

  那么,什么是上下文呢,比如说,我有一把菜刀,可以用来杀猪,那么这里我就是菜刀的上下文。你没有,但是有一天你也要去杀猪,怎么办,最简单的方式就是向我借,而不是自己去买,向我借就是说菜刀的上下文被指给你了。

  call函数和apply都是用来指定上下文的,但是call后面可以传递多个参数,而apply只能用来传递一个参数(也可以多个,不过要写成数组的形式)



  好,第一种方式解决了。但是第一种方法是有缺点的,就是子类只能继承构造函数里面的东西,而父类的原型函数上是继承不到的。

2.借助原型链

fucntion P(){
this.name = "P";
}
fucntion C2(){
}
C2.prototype = new P();
var c2 = new C2();

最后一句话的意思,就是将P实例成一个实例对象,然后,将这个对象作为子类的原型对象。

这种方法使用了原型链,但是由于直接绑定了原型函数,导致了一些问题。

fucntion P(){
this.name = "P";
}
fucntion C2(){
}
C2.prototype = new P() 
var s1 = new C2();
var s2 = new C2();
//这里,如果我们修改s1的东西
s1.name = "PPPP";
console.log(s2.name);//结果是 PPPP

原因是啥,因为s1和s2都是引用的同样的原型对象,所以,当s1的值修改,实际上就是修改了原型对象的值,因此,s2的值也会修改。很明显,这种方法是很不好的。

3.构造函数+原型链(组合方式)

fucntion P(){
this.name = "P";
}
fucntion C3(){
P3.call(this);
}
C3.prototype = new P();//2
var c3 = new C3();//1

   将两种方法的优点结合起来,这就是我们通常的方法。

实际上,这么写,有点小问题,实例化了两次对象(代码中表明了),浪费内存。

优化方式,直接在原型对象层面上进行就可以了,在//2的位置

C2.prototype = P.prototype

  ES6中的方法以后再看。

js中实现继承的不同方式以及其缺点的更多相关文章

  1. js中实现继承的几种方式

    首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...

  2. JS中的继承方式总结

    1. 原型链继承(又称类继承) Child.prototype = new Parent(); function Parent (name, age) { this.name = name; this ...

  3. 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承

    ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...

  4. JS中的继承(上)

    JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...

  5. js中的继承和重载

      js中有三种继承方式:一.通过原型(prototype)实现继承 二.借用构造函数式继承,可分为通过call()方法实现继承和通过apply()方法实现继承 仅仅通过原型继承我们可以发现在实例化子 ...

  6. JS中的继承(下)

    JS中的继承(下) 在上一篇 JS中的继承(上) 我们介绍了3种比较常用的js继承方法,如果你没看过,那么建议你先看一下,因为接下来要写的内容, 是建立在此基础上的.另外本文作为我个人的读书笔记,才疏 ...

  7. JS中对象继承方式

    JS对象继承方式 摘自<JavaScript的对象继承方式,有几种写法>,作者:peakedness 链接:https://my.oschina.net/u/3970421/blog/28 ...

  8. JS中的继承实现方式

    第一种:通过prototype来实现 prototype.html <!DOCTYPE html><html lang="en"><head> ...

  9. js中的继承

    js中继承的实现方式很多,此处给出两种常用方式. <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> ...

随机推荐

  1. PHP Extension开发(Zephir版本)

    上篇介绍了C语言开发PHP扩展的方法, 现在介绍使用Zephir开发扩展的方法. 关于Zephir需要简单介绍一下: Zephir 是为PHP开发人员提供的能够编写可编译/静态类型的高级语言.是优秀的 ...

  2. C# 托管堆和垃圾回收器GC

    这里我们讨论的两个东西:托管堆和垃圾回收器,前者是负责创建对象并控制这些对象的生存周期,后者负责回收这些对象. 一.托管堆分配资源 CLR要求所有的对象都从托管堆分配.进程初始化时,CLR划出一个地址 ...

  3. js中的写出想jquery中的函数一样调用

    1.IIFE: Immediately-Invoked function Expression 函数模块自调用 2.代码实现 <!DOCTYPE html> <html lang=& ...

  4. BZOJ3223/洛谷P3391 - 文艺平衡树

    BZOJ链接 洛谷链接 题意 模板题啦~2 代码 //文艺平衡树 #include <cstdio> #include <algorithm> using namespace ...

  5. javascript form表单常用的正则表达式

    form验证时常用的几个正则表达式 座机: \d{3,4}-\d{7,8} 手机号: /^1[34578][0-9]{9}$/ (\86)?\s+1[34578]\d{0-9} (\+86)?\s*1 ...

  6. pyinstaller打包py文件成exe文件时,出现ImportError: No module named 'pefile'错误解决办法!

    首先pyinstaller的安装与使用详见如下链接: 安装完成之后,命令行中输入pyinstaller之后,结果如下: ImportError: No module named 'pefile' 缺少 ...

  7. 迁移学习︱艺术风格转化:Artistic style-transfer+ubuntu14.0+caffe(only CPU)

    说起来这门技术大多是秀的成分高于实际,但是呢,其也可以作为图像增强的工具,看到一些比赛拿他作训练集扩充,还是一个比较好的思路.如何在caffe上面实现简单的风格转化呢? 好像网上的博文都没有说清楚,而 ...

  8. 第I篇PCI体系结构概述

    PCI总线作为处理器系统的局部总线,主要目的是为了连接外部设备,而不是作为处理器的系统总线连接Cache和主存储器.但是PCI总线.系统总线和处理器体系结构之间依然存在着紧密的联系. PCI总线作为系 ...

  9. RFM模型及R语言实现

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 一.基本概念 根据美国数据库营销研究所Arth ...

  10. 错误代码: 1054 Unknown column 'course' in 'field list'

    1.错误描述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:SELECT stu_name, course, score FROM t_ ...