JS 类

最新推荐文章于 2024-01-16 16:42:49 发布
最新推荐文章于 2024-01-16 16:42:49 发布
阅读量315 收藏 2
点赞数 2
分类专栏： record 文章标签： javascript 面向对象编程 class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42706887/article/details/108021123
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类</title>
</head>
<body>
    <button>点击</button>

    <script>
        /*-----------------创建类和生成实例----------------------------------*/
        // 1.创建类
        // class Star{
        //     constructor(name, age){  //是类的构造函数(默认方法),用于传递参数,返回实例对象,通过new命令生成实例时,自动调用该方法。若没有显示定义,类内部会自动创建一个constructor()
        //         this.name = name;  //this指向创建的实例
        //         this.age = age;
        //     }
        // }

        // 利用类创建对象
        // let star = new Star();
        // let star1 = new Star('abc');    //将abc传递给Star constructor的name,name再给this.name;
        // console.log(star1.name);    //abc
        // let star2 = new Star('aaa', 22)
        // console.log(star2); //返回一个对象
        // Star{
        //     name : 'aaa',
        //     age : 22
        // }


        /*-----------------类中添加共有方法----------------------------------*/
        // class Book{
        //     constructor(name){
        //         this.name = name;
        //     }
        //     iBs(ibs){  //添加函数不需要使用function,函数之间不需要 ','
        //         console.log(`${this.name}的ibs是${ibs}`);
        //     }
        // }

        // let book = new Book('《西游记》');
        // book.iBs('123456'); //《西游记》的ibs是123456




        /*-----------------类的继承extends和super关键字----------------------------------*/
        /*
            class Father{
                constructor(){
                    
                }
                money(){
                    console.log(100);
                }
            }
            class Son extends Father{

            }

            let son = new Son();
            son.money();    //100
        */


        /*
            class Father{
                constructor(x, y){
                    this.x = x;
                    this.y = y;
                }
                sum(){
                    console.log(this.x+this.y);
                }
            }
            class Son extends Father{
                constructor(x, y){
                    this.x = x;
                    this.y = y;
                }
            }

            let son = new Son(1, 2);
            son.sum();  //报错  Must call super constructor in derived class before accessing 'this' or returning from derived constructor
            
            父类中的sum中的this.x,this.y指向的是父类constructor中的this.x,this.y
            实列son中的1,2传递给的是子类constructor的this.x,this.y  父类获取不到子类传递进来的值
        */


        // super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数
        // 1.调用构造函数
        /*
            class Father{
                constructor(x, y){
                    this.x = x;
                    this.y = y;
                }
                sum(){
                    console.log(this.x+this.y);
                }
            }
            class Son extends Father{
                constructor(x, y){
                    super(x, y);    //super会调用父类的构造函数将子类传递进来的值，传递给父类
                }
            }
            let son = new Son(1, 2);
            son.sum();  //3
        */
        
        // 2.调用普通函数
        /*
            class Father{
                say(){
                    return '我是父类';
                }
            }
            class Son extends Father{
                say(){
                    // console.log('我是子类');
                    console.log(super.say()+`的子类`);  //super.say() 就是调用父类中的普通函数
                }
            }
            let son = new Son();
            son.say();  //我是子类   就近原则  实列化子类先从子类里面找有没有say方法,若没有就去父类找
                        //我是父类的子类
        */
        
        // 3.子类扩展方法
        /*
            class Father{
                constructor(x, y){
                    this.x = x;
                    this.y = y;
                }
                sum(){
                    console.log(this.x + this.y);
                }
            }
            class Son extends Father{
                constructor(x, y){
                    super(x, y);    //super必须在子类this之前调用,必须调用父类的构造方法,再使用子类的构造方法
                    this.x = x;
                    this.y = y;
                    // super(x, y);
                }
                subtract(){
                    console.log(this.x - this.y);
                }
            }
            let son = new Son(3, 2);
            son.sum();  //报错  Must call super constructor in derived class before accessing 'this' or returning from derived constructor
                        //5
            son.subtract();  //报错  Must call super constructor in derived class before accessing 'this' or returning from derived constructor
                                //1
        */
        
        // 注意
        // 1.在ES6中类没有变量提升,所以必须先定义类,才能通过类实列化对象
        // 2.类里面的共有属性和方法必须加this使用
        /*
            class Book{
                constructor(name){
                    this.name = name;
                    // sing(); //报错  sing is not defined
                    this.sing();    //hhhhh
                    this.btn = document.querySelector('button');
                    this.btn.onclick = this.sing;
                }
                news(){
                    // console.log(name);
                    console.log(this.name);
                }
                sing(){
                    //这个this指向btn,因为btn调用了这个函数
                    console.log('hhhhh');
                }
            }
            let book = new Book('123');
            book.news();    //为空
                            //123
        */

        // this指向问题
        let that;
        class Star{
            constructor(name, age){ // constructor里面的this指向创建的实例对象
                this.name = name;
                this.age = age;
                // that = this;
                // console.log(this);  //Star{name:12, age:24}
            }
            sing(){
                that = this;    //指向star,因为star调用了这个函数
                console.log(this);
            }
        }
        let star = new Star(12, 24);
        star.sing();
        console.log(that == star);   //true
        // 总结：constructor里面的this指向实例对象,方法里面的this指向这个方法的调用者
    </script>
</body>
</html>
nxcy
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 中的类
Amy的博客
12-24 1157
前言 整理 JavaScript 中类（包括 ES5、ES6 及 TypeScript）的实现方法， 以及相关知识。原封不动地记录了我觉得比较重要的概念，明白了这些概念也就理解了 JavaScript 中类的实现方式。 内容主要来自： JavaScript 高级程序设计（第3版） ES6 标准入门（第3版） MDN 本文仅整理、记录、学习。 理解对象 属性的类型（属性描述符） ECMA-262 第 5 版在定义只有在内部才用的特性（attribute）时，描述了属性（property）的各种特征。E
JS定义一个类
weixin_53126056的博客
12-18 4704
在JS中定义类的方式有两种 第一种 function 类名（形式参数列表）{ this.属性名=参数； this.方法名=function(){ } } 第二种 类名= function(形式参数列表){ this.属性名=参数； this.方法名=function(形式参数列表){ } } <html> <head> <meta charset="utf-8"> <ti
JS中的类
m0_53536475的博客
11-25 4283
入门JS类
【javascript】js中关于Class(类)的介绍和使用
最新发布
qq_2511276124的博客
01-16 2075
类语法有两个组成部分：类表达式和类声明。类声明和类表达式的主体都执行在严格模式下。比如，构造函数，静态方法，原型方法，getter 和 setter 都在严格模式下执行。一个类的类体是一对花括号/大括号 {} 中的部分。这是你定义类成员的位置，如方法或构造函数。constructor方法是一个特殊的方法，这种方法用于创建和初始化一个由class创建的对象。一个类只能拥有一个名为“constructor”的特殊方法。如果类包含多个constructor的方法，则将抛出 一个SyntaxError。
JavaScript中的类
weixin_42560424的博客
02-22 1329
在JavaScript中，类（Class）是一种创建对象的模板，它可以用来定义对象的属性和方法。类是一种抽象的概念，它定义了对象的行为和状态，而对象则是类的一个具体实例。
js中的Class类详解
热门推荐
yjwlike的博客
06-19 3万+
javascript中的类，包括静态属性私有属性继承等等
JS中的类是什么
zz_LXW的博客
09-01 6267
什么是类 类(class)这个概念来源于OOP（Object Oriented Programming），也就是面向对象编程，OOP是一种计算机编程架构，其有着封装，继承，多态三种特性。 而类在OOP中是实现信息封装的基础。 类是一种用户定义类型，也称类类型。 每个类包含数据说明和一组操作数据或传递消息的函数。 类的实例称为对象。 JS 中的类 在ES5之前，JS中要表达一个类，要用一种叫做pro...
JavaScript类的写法
11-24
早期的javascript需求都很简单，基本都是写成函数的，然后是面向过程的写法，后来慢慢的引入面向对象开发思想，再后来就慢慢写成类。 在js中，写成类的本质基本都是 构造函数+原型。下面，就讨论一下js类的几种写法...
JS类的封装及实现代码
10-29
在JavaScript中，虽然它并非一种传统的面向对象语言，但可以通过模拟类的概念来实现面向对象编程。JS类的封装和实现主要依赖于函数和闭包机制。下面我们将深入探讨如何在JavaScript中创建类、实现封装、抽象以及继承...
js代码-JavaScript 类
07-16
首先，让我们了解什么是JavaScript类。类是一种模板，用于创建具有相似属性和方法的对象。在JavaScript中定义一个类，你可以使用`class`关键字。例如： ```javascript class Person { constructor(name, age) { ...
js中类的概念和使用
m0_64442921的博客
03-12 4218
概念 类是指用来创造一类对象的模板，而通过这个模板创建出来的对象叫做实例。 类的基本使用 创建类：class 类名 { constructor(){ this.属性名 = 属性值; } 方法名1(){ } 方法名2(){ } } 语法中constructor为创建的实例对象添加了属性和方法。 语法中的方法1和方法2我称之为共用的方法，所有的实例对象都可以使用。主要有以下三个特征： 公共的方法不属于任何一个实例对象，但是所有的实例对象都可以调用。 公共的方法
Javascript定义类的三种方法
matinal 當冬夜漸暖 。公众号：matinal
04-22 3089
在面向对象编程中，类（class）是对象（object）的模板，定义了同一组对象（又称"实例"）共有的属性和方法。这种方法比"构造函数法"简单，但是不能实现私有属性和私有方法，实例对象之间也不能共享数据，对"类"的模拟不够全面。这种方法的好处是，容易理解，结构清晰优雅，符合传统的"面向对象编程"的构造，因此可以方便地部署下面的特性。然后，在Cat的createNew()方法中，调用Animal的createNew()方法。在createNew()方法中，只要不是定义在cat对象上的方法和属性，都是私有的。
JavaScript中类（class）的介绍和应用
m0_65029152的博客
12-25 1604
本文是对JavaScript中类的相关介绍，举例说明类的属性、方法、使用、继承等
JS 类总结
weixin_46015333的博客
11-20 603
本文总结了类的基本知识点，介绍了这个语法糖的构造函数、类成员特性、静态方法，并且着重介绍了类的继承以及在使用 super 关键字的特点，最后讲了如何实现抽象基类。
你需要知道的 JavaScript 类(class)的这些知识
油墨香^-^的博客
06-27 829
JavaScript 使用原型继承:每个对象都从原型对象继承属性和方法。在Java或Swift等语言中使用的传统类作为创建对象的蓝图，在 JavaScript 中不存在，原型继承仅处理对象。原型继承可以模拟经典类继承。为了将传统的类引入JavaScript, ES2015 标准引入了class语法，其底层实现还是基于原型，只是原型继承的语法糖。这篇文章主要让你熟悉 JavaScript 类:如何定义类，初始化实例，定义字段和方法，理解私有和公共字段，掌握静态字段和方法。1. 定义:类关键字使用关键字clas
JS入门必备基础知识（适合新人学习）
qq_57162921的博客
09-21 2123
js基础学习
学习javaScript必知必会(6)~类、类的定义、prototype 原型、json对象
伟庭的博客
01-16 695
学习javaScript必知必会(6)~类、类的定义、prototype 原型、json对象
javascript类
08-19
下面是一个简单的JavaScript类的示例： ```javascript class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`Hello, my name is ${this.name} and I'm...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值