牛客刷题——前端面试【二】谈一谈JavaScript面向对象

简介: 本章学习JavaScript面向对象。

目录


前言


一、类的定义(class)


语法:


二、给类添加方法


三、类的继承(extends、调用super())


1.继承父类普通属性


2.调用父类的构造函数


3.调用父类的普通函数


四、私有属性的获取


语法:


前言


      JavaScript 语言中,生成实例对象的传统方法是通过构造函数,ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。


一、类的定义(class)


   使用class关键词 声明类,constructor为构造方法,一个类必须有constructor()方法,如果没有显式定义,一个空的constructor()方法会被默认添加,this关键字则代表实例对象。


    注意:不需要在使用function(){}


语法:

基本语法

class Name {
}


创建实例:

var  p1 = new name();//p1是自己取的

举例:

class UserName{
            constructor(uname,age){
                this.uname=uname;
                this.age = age; 
            }
    }
        var xm=new UserName('小明',18);
        console.log(xm.uname ,xm.age);

image.png

二、给类添加方法


 需要将填加的东西直接放入,定义的类中


举例:

 

class UserName{
            constructor(uname,age){
                this.uname=uname;
                this.age = age; 
            }
            sing(song){
                console.log('唱歌');//直接调用
                console.log(this.uname+song);//使用函数传递参数
            }
        }
        var xm=new UserName('小明',18);
        console.log(xm.uname ,xm.age);
        xm.sing('中国');

image.png 

三、类的继承(extends、调用super())


Class 可以通过extends关键字实现继承,让子类继承父类的属性和方法。


ES6 规定,子类必须在constructor()方法中调用super(),否则就会报错。


举例:

1.继承父类普通属性

父类:

class Fsther {
        constructor(){
        }
        money(){
            console.log(100);
        }
    }

子类:

class Son extends Fsther{
    }
    var son = new Son();//给子类实例化
    son.money();//可以获取父类的内容



image.png

2.调用父类的构造函数

父类:

class Fsther {
        constructor(x,y){
            this.x=x;
            this.y=y;
        }
        addition(){
            console.log(this.x+this.y);
        }
    }


子类:

class Son extends Fsther{
        constructor(x,y,z){
            super(x,y);//获取父类的构造函数,super必须在子类使用this前,调用父类
            this.z=z;//子类的添加
        }
    }
    var son = new Son(1,2,5);
    son.addition();
    console.log(son.z);//获取子类所添加的内容
//在实际开发中,可以通过调用来节省时间,在调用的基础上增加,所需要的内容。


image.png

3.调用父类的普通函数

父类:

class Fsther {
      say(){
        return '我是小明';
      }
    }


子类:

class Son extends Fsther{
       say(){
        console.log(super.say()+'的儿子');
       }
    }
    var son = new Son();
    son.say();

image.png  

四、私有属性的获取


语法:

#p=1;
getp(){
  return this.#p;
}


举例:

class Fsther {
    #money=10000             //设置私有属性
    getMoney(){              //获取私有属性
        return this.#money;
    }
    }
    class Son extends Fsther{
    }
    var son = new Son();
    var f = new Fsther();
    f.getMoney();
    console.log(f.getMoney());
    console.log(son.getMoney());


image.png


结束语:

让我们一起进步,拿到自己想要的offer


相关文章
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
817 1
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
821 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
JavaScript 前端开发 API
|
自然语言处理 JavaScript 前端开发
当面试官再问我JS闭包时,我能答出来的都在这里了。
闭包(Closure)是前端面试中的高频考点,广泛应用于函数式编程中。它不仅指函数内部定义的函数,还涉及内存管理、作用域链和垃圾回收机制。闭包可以让函数访问其外部作用域的变量,但也可能引发内存泄漏等问题。通过合理使用闭包,可以实现模块化、高阶函数和回调函数等应用场景。然而,滥用闭包可能导致代码复杂度增加、调试困难以及潜在的性能问题。为了避免这些问题,开发时应谨慎处理闭包,避免不必要的嵌套,并及时清理不再使用的变量和监听器。
671 16
当面试官再问我JS闭包时,我能答出来的都在这里了。
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
830 8
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
16304 23
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1319 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
457 3
springboot解决js前端跨域问题,javascript跨域问题解决
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
1230 5
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
608 4