首页 > 其他分享 >js中的类和constructor

js中的类和constructor

时间:2022-11-09 11:14:24浏览次数:47  
标签:function name height width sayName constructor js Polygon

问题
一直搞不清constructor和super是干什么用的。

前提
了解js的继承

原型继承
原型继承是通过利用js的原型链

function People(name, age) {
  this.name = name;
  this.age = age;
}
People.prototype.sayName = function() {
  console.log('my name is ' + this.name);
}

function Man() {}
Man.prototype = new People('小明', 20);

let m = new Man();

m.sayName();

call或者apply实现继承
利用call和apply可以绑定this

function People(name, age) {
  this.name = name;
  this.age = age;
}
People.prototype.sayName = function() {
  console.log('my name is ' + this.name);
}

function Man() {
  People.call(this, 20);
}

let m = new Man();

m.sayName();

js的类
其实js的类就是语法糖

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
  sayName() {
    console.log('Hi, I am a ', this.name + '.');
  }
}

class中的构造函数其实就相当于以前的这种写法

function Polygon(height, width) {
  this.name = 'Polygon';
  this.height = height;
  this.width = width;
  this.sayName = sayName;
}

function sayName() {
  console.log('Hi, I am a ', this.name + '.');
}

只是不一样的写法,super是调用父类构造函数,参数就是传到父类构造函数的参数

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
  sayName() {
    console.log('Hi, I am a ', this.name + '.');
  }
}

class Square extends Polygon {
  constructor(length) {
    this.height; 
    // ReferenceError,super 需要先被调用!
    
/*
   这里,它调用父类的构造函数的 length, 
   作为Polygon 的 width和 height.
*/ 
    super(length, length);
    
/*
    注意: 在派生的类中, 在你可以使用'this'之前, 必须先调用super()。
    忽略这, 这将导致引用错误。
*/
    this.name = 'Square';
  }

  get area() {
    return this.height * this.width;
  }

  set area(value) {
    this.area = value;
  } 
}

标签:function,name,height,width,sayName,constructor,js,Polygon
From: https://www.cnblogs.com/Sultan-ST/p/16872918.html

相关文章

  • Part 17:Cocos2d-x开发实战-基于Node.js的Socket.IO网络通信-关东升-专题视频课程
    Part17:Cocos2d-x开发实战-基于Node.js的Socket.IO网络通信—5843人已学习课程介绍        介绍了基于Node.js的Socket.IO网络通信技术。我们介绍了采用Node.js技......
  • #冲刺创作新星#【FFH】Bearpi-Micro深入解析通过JS应用控制LED灯
    (目录)一、前言最近跑了一遍Bearpi-Micro编写点亮LED灯程序的Demo,深入了解了如何在开发板上运行一个控制LED灯的程序,达到能关闭灯、开启灯以及翻转灯的状态,南向如何编写JS......
  • linux 安卓 node.js
    如果是宝塔面板直接下载版本管理器安装即可 linux:推荐版本 Node.jsv14.17.3. 2022年11月9日下载:https://registry.npmmirror.com/binary.html?path=node/ 上......
  • js高级之函数高级部分
    基于尚硅谷的尚硅谷JavaScript高级教程提供笔记撰写,加入一些个人理解github源码博客下载原型与原型链prototype:显式原型属性,它默认指向一个Object空对象(即称为:......
  • js高级之对象高级部分
    基于尚硅谷的尚硅谷JavaScript高级教程提供笔记撰写,加入一些个人理解github源码博客下载对象的创建模式Object构造函数模式套路:先创建空Object对象,再动态添加属......
  • 从6个方面净化你的Js代码
    记录一下怎样写出整洁规范的代码,用于共勉进步。对于什么是整洁的代码,书中给出了大师们的总结:BjarneStroustrup:优雅且高效;直截了当;减少依赖;只做好一件事Gradybooch:简单直接......
  • js提交数据
    一、from表单提交<formaction=""method="post"enctype="multipart/form-data"><inputtype="submit"class="btnbtn-info">属性:action:是form表单提交数据的......
  • 使用jwt鉴权(jsonwebtoken)
    1.下载jsonwebtokennpmi-Sjsonwebtoken2.引用constjwt=require('jsonwebtoken');3.需要设置秘钥constsecretKey='3.14159263528542852651268541';4.设......
  • 前端零配置打包工具 parceljs 体验
    参考https://www.parceljs.cn/getting_started.htmlparceljs中文官网https://www.parceljs.cn/getting_started.htmlParcel1版本的中文文档https://v2.parceljs.cn......
  • js小知识点
    01.thisthis的指向完全由函数在哪里调用决定。在ES5中,this永远指向调用它的那个对象;在ES6的箭头函数中没有this绑定,this指向箭头函数定义时作用域中的this;判断this的......