ES6要掌握的基本知识5:类、实例、原型

最新推荐文章于 2022-10-14 19:40:22 发布
最新推荐文章于 2022-10-14 19:40:22 发布
阅读量203 收藏 2
点赞数 1
分类专栏： javascript es6 文章标签： javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44098615/article/details/113561487
版权

类：对实例的一个抽象（把众多有相似特征的实例组合在一起，总结出他们共同的特征，这就是类）
实例：是类的具体实现
在这里插入图片描述
一个类可以生成多个实例
实例上具体化的属性和方法可以通过类去查看
每个类都会有一个属性叫原型，生成实例时会按照着该原型生成。
每个实例都有一个属性叫隐式原型（实例名.proto），他关联着类的原型
在这里插入图片描述
获取原型的方法：类名.prototype
ep:Array.prototype
所有方法都在原型里了：Array()的
在这里插入图片描述

<body>
    <div id="box"></div>
    <script>
       var b=document.getElementById('box');
       console.log(b)
       console.dir(b)
    </script>
</body>

在这里插入图片描述
在这里插入图片描述

关系：
在这里插入图片描述

袋鱼�
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript设计模式之原型模式分析【ES5与ES6】
10-18
主要介绍了JavaScript设计模式之原型模式,简单描述了原型模式的概念、原理,并结合实例形式分析了ES5与ES6实现原型模式的相关操作技巧,需要的朋友可以参考下
ES6中Class类的静态方法实例小结
11-27
类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法” class Foo { static classMethod() ...
前端研习录（43）——ES6 Class讲解及示例分析
清风不渡
10-14 550
重拾前端记忆，记录学习笔记，现在进入Class部分
js的原型链
weixin_34060741的博客
09-28 224
开篇 之前对js中的原型链和原型对象有所了解，每当别人问我什么是原型链和原型对象时，我总是用很官方（其实自己不懂）的解释去描述。有一句话说的好：如果你不能把一个很复杂的东西用最简单的话语描述出来，那就说明你没有真正的理解。最近正在读《Javascript高级程序设计》，书中对原型对象和原型链的描述让我受益匪浅，下面仅用一个对比性的例子来说明。 我们经常会这么写 function Pe...
ES6中Class类构造函数、实例、原型属性和方法、继承extends、super关键字
qq_51066068的博客
05-11 2180
目录 Class类 构造函数 实例属性和方法 原型属性和方法 静态属性和方法 继承 super 关键字 Class类 JavaScript 语言中，生成实例对象的传统方法是通过构造函数。 ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰更像面向对象编程的语法而已。所以ES..
javascript中实例，类，实例的原型，类的原型，以及constructor，prototype的区别和联系
前端361
11-25 1179
javaScript中实例，类，原型等是js语言的核心概念，在充分理解并掌握的情况下，才能在编程中得心应手。近期进行知识归类总结，对js中的实例，类，类的原型，实例的原型，类的prototype，实例的prototype进行一个总结。 核心概念：prototype指的是原型对象， __proto__指的是原型 看一个简单的例子： class a{ constructor(optio...
ES6—01：创建类和实例
Always-Learning
02-17 311
constructor(构造函数) constructor()方法是类的构造函数（默认方法），用于传递参数，返回实例对象，通过new命令生成对象实例时，自动调用该方法。如果没有显示定义，类内部会总动给我们创建一个constructor(). 只要new对象，就会自动调用类的构造函数。 类名首字母一般大写。 代码 <script> class Star { constructor(name) { this.name = name;
es5 类与es6中class的区别小结
01-18
前言 在es5中主要是通过构造函数方式和原型方式来定义一个类，在es6中我们可以通过class来定义类，今天整理一下它们的区别...三、class类无法遍历它实例原型链上的属性和方法 function Foo (color) { this.color = co
js定义类的方法示例【ES5与ES6】
12-08
本文实例讲述了js定义类的方法。分享给大家供大家参考，具体如下： 以下是es5标准里定义类的方法： ...上面这样用构造函数和原型混合的方法定义类，是为了每次new新实例时可以共享方法，不用创建function新
类和原型
Albert_ChengXY的博客
08-15 846
类与原型的结合使用 function Fn(){} Fn.run=function(){} //这种写法与ES6中的静态方法一样 Fn.prototype.play=function(){} //这种写法就是正常的执行方法 实例化时会将构造函数的prototype对象下的所有方法和属性添加在实例化对象的原型链中 类的原型等于实例化对象的原型链 定义一个父类，并利用原型设置类中的方法，同时将被覆盖的构造函数重新设定出来 function Box(){ } Box.proto
ES6中定义类和对象的方法示例
12-09
本文实例讲述了ES6中定义类和对象的方法。分享给大家供大家参考，具体如下： 类的基本定义和生成实例： // 类的基本定义和生成实例 class Parent{ //定义一个类 constructor(name='xiaxaioxian'){ this.name= name; } } // 生成一个实例 let g_parent = new Parent(); console.log(g_parent); //{name: "xiaxaioxian"} let v_parent = new Parent('v') // 'v'就是构造函数name属性 , 覆盖构造函数
ES6中class类用法实例浅析
08-30
主要介绍了ES6中class类用法,结合实例形式分析了ES6中类的实现方法与相关语法使用技巧,需要的朋友可以参考下
es6类
c1098210432的博客
04-07 1419
说到es6的calss类，大家知道es6之前的js是没有class类的。大家都是用大驼峰式来构造一个函数这是es6前类定义写法function Person(name,age){     this.name = name; this.age = age; this.showMsg = function(){ console.log(name,age); }, this.print =...
前段面试题（6）
qq_54780978的博客
12-23 188
1、对于即将到来的vue3.0特性你有什么了解的吗？ Vue3.0的目标是让Vue核心变得更小、更快、更强大 2、虚拟DOM的优缺点？ 优点： （1）保证性能下限 （2）无需手动操作DOM （3）跨平台 缺点: （1）无法进行极致优化 3、虚拟DOM实现原理 用JavaScript对象模拟真实DOM树，对真实DOM进行抽象； diff算法—比较两棵虚拟DOM树的差异； pach算法—将两个虚拟DOM对象的差异应用到真正的DOM树。...
ES6这些就够了！
宜春
11-01 481
刚开始用Vue或者React，很多时候我们都会把ES6+这位大兄dei加入我们的技术栈中。但是ES6+那么多那么多新特性，我们真的需要全部都掌握吗？秉着二八原则，掌握好常用的、有用的，这个可以让我们的开发快速起飞。 接下来我们就聊聊ES6那些可爱的新特性吧！ 1.变量声明 const 和 let 在ES6之前，我们都是用 var 关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升 例如： function aa() { if
【ES6 教程】第四章 ES6类05—如何定义一个类的所有实例
web前端开发
06-07 125
英文 | https://www.javascripttutorial.net翻译 | 杨小爱在今天的教程中，我们将一起来学习 JavaScript 类的静态属性，以及如何使用静态方法、类构造函数和其他实例方法中访问静态属性。JavaScript 静态属性介绍与静态方法一样，静态属性由类的所有实例共享。要定义静态属性，请使用 static 关键字，后跟属性名称，如下所示：...
ES6类和继承
涂涂
10-31 5976
首先看代码 class Person { constructor(name){ console.log(`构造函数执行了,${name}`) } } let p1= new Person('jona') 此处，调用new的时候就自动执行了构造函数，所以接收参数也是在构造函数出接收 class Person { constructor(name){ ...
Javascript中的 对象方法（实例方法），类方法，原型方法。
youngwangb的博客
05-28 443
function Base(){ // 实例方法 this.sayMe = function(){ alert('base::sayMe'); } } function Sub(){ //实例方法 //this.sayMe = function(){ //alert('sub::sayMe'); //} } Sub.prototype = new Bas...
JS 中 类和实例 的创建 和简单原型
error311的博客
03-16 307
利用函数的思想 function create(name, sex, age){ var obj = new Object(); obj.name = name; obj.sex = sex; obj.age = age; obj.say = function(){ document.write('hello'); } return obj; } var p1 = ...
es6class类的语法
最新发布
08-25
ES6的class和ES5的原型对象写法实现的功能基本相同，但class语法让对象原型的写法更加清晰、更像面向对象编程的语法。class的基本语法是使用关键字class定义一个类，类名可以自定义，然后使用constructor方法定义类...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值