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

类的声明

第一种

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. META标签的定义与使用(二、页面描述信息(NAME))

    二.name的content指定实际内容.如:如果指定level(等级)为value(值),则Content可能是beginner(初级).intermediate(中级).advanced(高级). ...

  2. heartbeat 高可用

    转载来自 http://www.cnblogs.com/liwei0526vip/p/6391833.html 使用HeartBeat实现高可用HA的配置过程详解 一.写在前面 HA即(high av ...

  3. CF982F The Meeting Place Cannot Be Changed

    题意:给你一张有向图,某人会任意选择起点然后走无穷多步,问是否存在一个点(要求输出)不管他起点在何处怎么走都必经?n<=100005,m<=500005. 标程: #include< ...

  4. 解析JQuery Ajax

    jQuery是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封 ...

  5. 云-腾讯云-实时音视频:实时音视频(TRTC)

    ylbtech-云-腾讯云-实时音视频:实时音视频(TRTC) 支持跨终端.全平台之间互通,从零开始快速搭建实时音视频通信平台 1.返回顶部 1. 腾讯实时音视频(Tencent Real-Time ...

  6. 记录一次hexo托管到coding失败,页面总是404,可是相同的代码托管到github是没问题的。

    文章目录 问题描述: 问题原因: 问题解决 2019.1.23 问题,coding又挂了. 弃疗 个人博客:https://mmmmmm.me 源码:https://github.com/dataiy ...

  7. PAT甲级——A1119 Pre- and Post-order Traversals【30】

    Suppose that all the keys in a binary tree are distinct positive integers. A unique binary tree can ...

  8. Cmd使用方式--命令行运行程序

    工具用惯却不知道如何去描述什么用,总感觉自己学东西用东西零零散散不系统,心虚!下面总结下自己使用cmd的几种方式. 1 => cmd,command,是window系统下命令提示符,是一种com ...

  9. Func-Chain.js 另一种思路的javascript异步编程解决方案

    本文转载自:https://www.ctolib.com/panruiplay-func-chain.html Func-Chain.js 另一种思路的javascript异步编程,用于解决老式的回调 ...

  10. Android开发 StateListDrawable详解

    前言 StateListDrawable是与xml中的selector属性对应代码实现类,它需要配合GradientDrawable的使用,如果你还不了解GradientDrawable可以参考我的另 ...