• 类的声明
  • 继承的几种方法

类的声明

第一种

function car(){
this.name = 'name';
}

第二种。es6中新添加的

class car(){
constructor(){
this.name ='name';
}
}

继承的几种方法

1.构造函数实现继承

function Parent(){
this.name = 'parent';
}
Parent.prototype.toSay = function(){
console.log(this.name);
} function Child(){
Parent.call(this);
this.name1 = 'child';
} console.log(new Child())

原理:在子类中调用了父级的构造函数,并把上下文换成子类,只是部分继承

缺点:看到上面输出的就知道,父类的prototype上的方法继承不了

2、原型链继承

上面的方法父类的prototype的方法继承不了,就自然会想到把父类实例赋值给子类的prototype这样,因为Parent的实例的__proto__指向了Parent.prototype

function Parent(){
this.name='parent';
   this.play = [1, 2, 3];
} function Child(){
this.type="child";
} Child.prototype = new Parent(); var c1 = new Child();
var c2= new Child();

c2.play.push(4);
  console.log(c1.play, c2.play);

缺点:会改变原型链上的数值

优化组合方法一

function Parent(){
this.name= 'name';
this.play = [1, 2, 3];
} function Child(){
Parent.call(this);
this.type = 'child'
} Child.prototype = new Parent()
var c1= new Child();
var c2 = new Child();
c2.play.push(4);
console.log(c1.play, c2.play);

原理:这是上面两种方法的组合

缺点:父级的构造函数在子类实例的时候执行了两次

优化组合方法二

 function Parent () {
this.name = 'parent';
this.play = [1, 2, 3];
}
function Child () {
Parent.call(this);
this.type = 'child';
}
Child.prototype = Parent.prototype;
var c1 = new Child();
var c2 = new Child(); console.log(c1 instanceof Child, c2 instanceof Parent);
console.log(c1.constructor);

原理:和上面的一种比较是不再实例Parent而是直接将Child.prototype指向Parent.prototype,这样parent原型链上有的方法,child也会有

缺点:子类的构造器是父类,而不是子类,因为他们共用了一个原型对象

完美的方法

function Parent(){
this.name = 'parent';
this.play=[1,2]
} function Child(){
Parent.call(this)
this.type = 'child'
} Child.prototype = Object.create(Parent.prototype)
Child.constructor = Child;

js 面向对象类的更多相关文章

  1. js面向对象--类式继承

    //待研究//类式继承 //js中模拟类式继承的3个函数 //简单的辅助函数,让你可以将新函数绑定到对象的 prototype 上 Function.prototype.method = functi ...

  2. JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  3. JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  4. js面向对象设计之class类

    class 相对 function 是后出来的,既然 class 出来了,显然是为了解决 function 在处理面向对象设计中的缺陷而来.下面通过对比,来看看 class 作为 ES6 中的重大升级 ...

  5. js面向对象设计之function类

    本文仅探讨如何合理的使用 function 在 javascript中实现一个面向对象设计的类.总所周知,javascript 并不能实现一个真正意义上的类,比如 protect 比如 函数重载.下面 ...

  6. js面向对象(对象/类/工厂模式/构造函数/公有和原型)

    https://www.cnblogs.com/sandraryan/ 什么是对象 js中一切都是对象(有行为和特征).js允许自定义对象,也提供了内建对象(string date math等) 对象 ...

  7. JS面向对象编程创建类的方式

    js创建类的方式有几种,大致如下: 1,构造函数方式: function Car(parameters) { this.name = "objectboy"; } var cat1 ...

  8. JS面向对象的类 实例化与继承

    JS中 类的声明有两种形式: // 类的声明 function Animal() { this.name = 'name' } // ES6中的class声明 class Animal2 { cons ...

  9. JS面向对象(2) -- this的使用,对象之间的赋值,for...in语句,delete使用,成员方法,json对象的使用,prototype的使用,原型继承与原型链

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

随机推荐

  1. Spark SQL设计

  2. element-ui 框架中使用 NavMenu 导航菜单组件时,点击一个子菜单会出现多个子菜单同时展开或折叠?

    我在使用 elment-ui 框架的导航组件时,直接粘贴复制了官网上 (http://element-ui.cn/#/zh-CN/component/menu)的例子不会出错,但是当我将他们转化为动态 ...

  3. windows下 Mysql 8.0.x 数据库简单的导出和导入!!!

    1.首先需要进入到mysql安装目录下的bin目录,执行cmd进入命令窗口. 2.导出(导出某个数据库,也可以针对某张表导出)2.1导出数据结构以及数据的命令: mysqldump -u root - ...

  4. CSIC_716_20191119【常用模块的用法 subprocess、re、logging、防止自动测试、包的理论】

    subprocess模块 可以通过python代码给操作系统终端发送命令,并可以得到返回结果. import subprocess str = input('>>>请输入命令') # ...

  5. 基于vue,通过父组件触发子组件的请求,等请求完毕以后,显示子组件,同时隐藏父组件

    正常情况下,子组件应该尽量减少业务逻辑,而应该将业务逻辑放到父组件里面,从而减少耦合,但是当 我们不得不用到这种情况时,可以采用下面的思路 解决方案 尽量将请求单独作为一个函数(不要将请求放到show ...

  6. springboot2.x jpa接入多数据源

    环境:springboot 2.1.4 数据源引入方式 数据源一 @Configuration @EnableTransactionManagement @EnableJpaRepositories( ...

  7. linux中对EINTR错误的处理

    https://www.cnblogs.com/flyfish10000/articles/2576885.html EINTR错误的产生:当阻塞于某个慢系统调用的一个进程捕获某个信号且相应信号处理函 ...

  8. VS2010-MFC(常用控件:编辑框Edit Control)

    转自:http://www.jizhuomi.com/software/181.html 编辑框(Edit Control)是一种很常用的控件,我们可以在编辑框中输入并编辑文本.在前面加法计算器的例子 ...

  9. VS2015遇到的自带报表的问题

    1.设计报表时候,没有“报表数据”工具,直接在报表设计那里按ALT+CTRL+D 2.设计报表时候有时候找不到这些按钮,只需要重置窗口布局就行了.

  10. vue打包后index.html界面报错

    vue项目完成后,打包放到服务器上,打开index.html页面时发现一片空白并且报错 很明显是js和css引用不到. 解决办法: 修改vue项目config文件夹下面的index.js,将asset ...