javascript中的类,继承,构造函数详解

目录
  • 前言
  • 一、Class类
  • 二、es5构造函数
  • 三、实例、类的关系
    • 实例的原型指向类的原型
    • Constructor
  • 四、继承
    • es6继承
    • es5继承的实现
  • 总结

前言

在es5中实现一个构造函数，并用new调用，即可得到一个类的实例。到了es6发布了Class的写法，js的面向对象变成也变得比较规范了。聊到类就不能不说类的构造函数以及类如何继承

一、Class类

定义一个类：

    class A {
        constructor(name){
            this.name = name
        }
        getName(){
            return this.name
        }
    }
    var newA = new A("A")
    console.log(newA.getName())  // A

二、es5构造函数

在es5中没有Class的写法，想要实现一个类的写法是这样的：

    class A {
        constructor(name){
            this.name = name
        }
        getName(){
            return this.name
        }
    }
    var newA = new A("A")
    console.log(newA.getName())  // A

三、实例、类的关系

实例的原型指向类的原型

console.log(newA.__proto__ === A.prototype)  // true

关于这个可以了解一下实例化的过程究竟发生了什么，查看MDN的连接：new操作符

  • 创建一个空的简单JavaScript对象（即{}）；
  • 为步骤1新创建的对象添加属性__proto__，将该属性链接至构造函数的原型对象 ；
  • 将步骤1新创建的对象作为this的上下文 ；
  • 如果该函数没有返回对象，则返回this。

Constructor

    console.log(A.prototype.constructor) // Class A

所有的对象都会从原型上继承一个constructor属性，是对函数本身的引用，也就是说指向函数本身。

这里实例newA的原型与A的原型相等，两者的原型的constuctor又都指向A本身。

需要注意的是constrctor是可以被修改的：参照MDN官方实例：constructor

function Type() { };

var	types = [
	new Array,
    [],
	new Boolean,
    true,        // remains unchanged
	new Date,
	new Error,
	new Function,
	function(){},
	Math,
	new Number,
	1,           // remains unchanged
	new Object,
	{},
	new RegExp,
	/(?:)/,
	new String,
	"test"       // remains unchanged
];

for(var i = 0; i < types.length; i++) {
	types[i].constructor = Type;
	types[i] = [ types[i].constructor, types[i] instanceof Type, types[i].toString() ];
};

console.log( types.join("\n") );

只有，true、1、“test”这种只读的原生结构不可被修改constuctor

四、继承

es6继承

    class Father{
        constructor(name){
            this.name = name
        }
    }
    class Son extends Father{
        constructor(name,sname){
            super(name)
            this.sname = sname
        }
        getSon(){
            return this
        }
    }
    var newSon = new Son("f","s")
    console.log(newSon.getSon())  // Son {name: 'f', sname: 's'}

es5继承的实现

    // 寄生组合继承
    function Sub(name){
        // 优先执行this绑定，以免覆盖子类的构造的值
        // 这里还有一个作用是拷贝了父类属性，避免所有子类共享引用属性！！！！
        Person.call(this)
        this.name = name || 's'
    }
    // 复制一份父类的原型，避免修改原型影响其他实例
    var fn = function(){}
    fn.prototype = Person.prototype
    Sub.prototype = new fn()
    var sub = new Sub('sub')
    sub.showName()
    // user extend.html:19
    // my name is sub extend.html:21

关于继承详细的可以参考这篇：前端必知必会ES5、ES6的7种继承

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • JavaScript类的继承多种实现方法

    类的继承 1 子承父业 extends(继承父类的普通函数)(方法) class Father { constructor() { } money() { console.log(100); } } class Son extends Father { } class sunzi extends Son { } var yxf = new Father; var lbw = new Son; var bb = new sunzi; console.log(yxf.money()); consol

  • JavaScript知识:构造函数也是函数

    JavaScript知识:构造函数也是函数

    目录 1.构造函数的定义与调用 2.new关键字的用途 3.构造函数的问题:浪费内存 总结 首先要明确的是构造函数也是函数 我经常使用构造函数来创建实例对象,例如对象和数组的实例化可以通过相应的构造函数Object()和Array()完成. 构造函数与普通函数在语法的定义上没有任何区别,主要的区别体现在以下3点. (1)构造函数的函数名的第一个字母通常会大写.按照惯例,构造函数名称的首字母都是要大写的,非构造函数则以小写字母开头.这是从面向对象编程语言那里借鉴的,有助于在ECMAScript中区

  • js类的继承定义与用法分析

    本文实例讲述了js类的继承定义与用法.分享给大家供大家参考,具体如下: 如何实现类的继承呢? 有如下2个构造函数: function PeopleClass(){ this.type = "人"; }; PeopleClass.ptototype = { getType:function(){ alert("这是一个人"); } }; function StudentClass(name,sex){ this.name = name; this.sex = sex;

  • javascript的构造函数, 原型,原型链和new你了解多少

    javascript的构造函数, 原型,原型链和new你了解多少

    目录 1.什么是构造函数? 2.如何通过构造函数创建一个对象? 3.new一个对象的过程发生了什么? 4.什么是原型? 5.原型.构造函数.实例的关系? 6.什么是原型链? 7.类? 总结 1.什么是构造函数? 如果一个函数被设计出来,是用于通过new关键字创建对象的,它就是一个构造函数. 如下: function Father(name,age){this.name = name;this.age = age;}function Father(name,age){ this.name = na

  • Js类的构建与继承案例详解

    JS里类的定义和继承实在五花八门,所以单独开一个笔记本记录. 定义 派生于Object的方式 1.new Object:在创建对象后动态定义属性.方法 var Car = new Object; Car.color = "red"; Car.showColor = function(){ console.log(this.color); } //想要继承就要先构造空对象然后用__proto__原型链来继承 var Car1 = new Object; //或者 = {} Car1.__

  • 15分钟深入了解JS继承分类、原理与用法

    本文全面讲述了JS继承分类.原理与用法.分享给大家供大家参考,具体如下: 许多 OO 语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.由于 ECMAScript 中的函数没有签名,所以在 JS 中无法实现接口继承.ECMAScript 只支持实现继承,而且其实现继承主要是依靠原型链来实现的.所以,下面所要说的原型链继承.借用构造函数继承.组合继承.原型式继承.寄生式继承和寄生组合式继承都属于实现继承. 最后的最后,我会解释 ES6 中的 exten

  • JS深入浅出Function与构造函数

     1.概述 Function是一个构造函数,可以通过该构造函数去创建一个函数,创建的函数是一个Function对象,实际上,不管使用什么方式创建的都是一个Function对象,本质上函数名仅仅是一个变量名,它指向某个Function对象的引用. 验证代码如下所示: var f = function () { console.log('this is f function'); } // 函数也是一个对象 console.log(f instanceof Object); // true // 函

  • javascript中的类,继承,构造函数详解

    目录 前言 一.Class类 二.es5构造函数 三.实例.类的关系 实例的原型指向类的原型 Constructor 四.继承 es6继承 es5继承的实现 总结 前言 在es5中实现一个构造函数,并用new调用,即可得到一个类的实例.到了es6发布了Class的写法,js的面向对象变成也变得比较规范了.聊到类就不能不说类的构造函数以及类如何继承 一.Class类 定义一个类: class A { constructor(name){ this.name = name } getName(){

  • JavaScript中定义类的方式详解

    本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门灵活的语言,下面我们就看看没有关键字class的Javascript如何实现类定义,并创建对象. 一.定义类并创建类的实例对象 在Javascript中,我们用function来定义类,如下: function Sh

  • javascript中定义类的方法详解

    JS中定义类的方式有很多种: 1.工厂方式 复制代码 代码如下: function Car(){    var ocar = new Object;    ocar.color = "blue";    ocar.doors = 4;    ocar.showColor = function(){     document.write(this.color)    };    return ocar;   }   var car1 = Car();   var car2 = Car()

  • ES6 javascript中Class类继承用法实例详解

    本文实例讲述了ES6 javascript中Class类继承用法.分享给大家供大家参考,具体如下: 1. 基本用法 Class 之间可以通过extends关键字实现继承, 这比 ES5 的通过修改原型链实现继承, 要清晰和方便很多. class ColorPoint extends Point {} 上面代码定义了一个ColorPoint类, 该类通过extends关键字, 继承了Point类的所有属性和方法. 但是由于没有部署任何代码, 所以这两个类完全一样, 等于复制了一个Point类. 下

  • JavaScript中浅讲ajax图文详解

    JavaScript中浅讲ajax图文详解

    1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输. 如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧. 打开

  • JavaScript 中调用 Kotlin 方法实例详解

    JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =

  • JavaScript 中this指向问题案例详解

    总结 全局环境 ➡️ window 普通函数 ➡️ window 或 undefined 构造函数 ➡️ 构造出来的实例 箭头函数 ➡️ 定义时外层作用域中的 this 对象的方法 ➡️ 该对象 call().apply().bind() ➡️ 第一个参数 全局环境 无论是否在严格模式下,this 均指向 window 对象. console.log(this === window) // true // 严格模式 'use strict' console.log(this === window

  • C/C++中派生类访问属性详解及其作用介绍

    C/C++中派生类访问属性详解及其作用介绍

    目录 保护继承 派生类成员的访问属性 总结 保护继承 由 protected 声明的成员称为 "受保护的成员", 或简称 "保护成员". 从用户的角度来看, 保护成员等价于私有成员. 保护成员可以被派生类的成员函数引用. 派生类成员的访问属性 4 种访问属性: 公用的: 类内和类外都可以访问 受保护的: 类内可以访问, 类外不能访问, 下一层的派生类可以访问 私有的: 类内可以访问, 类外不能访问 不可访问的: 类内和类外都不能访问 继承方式 基类中的成员 访问属性

  • C#中ArrayList 类的使用详解

    目录 一:ArrayList 类简单说明 二:ArrayList 类的构造函数 三:ArrayList 类的属性 1:使用举例说明 四:ArrayList 类的常用方法 1: AddRange(ICollection)方法使用举例 2: ArrayList.Clone() 方法使用举例 3:ArrayList.Remove(Object) 使用举例 4:ArrayList.RemoveAt(Int32) 使用举例 5:ArrayList.RemoveAt(Int32) 使用举例 6:ArrayL

  • JavaScript中push(),join() 函数 实例详解

    定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选

随机推荐