牛客刷题——前端面试【二】谈一谈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


相关文章
|
2天前
|
JSON JavaScript 前端开发
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
本文介绍了JSONP的工作原理及其在解决跨域请求中的应用。首先解释了同源策略的概念,然后通过多个示例详细阐述了JSONP如何通过动态解释服务端返回的JavaScript脚本来实现跨域数据交互。文章还探讨了使用jQuery的`$.ajax`方法封装JSONP请求的方式,并提供了具体的代码示例。最后,通过一个更复杂的示例展示了如何处理JSON格式的响应数据。
10 2
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
|
2天前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
12 4
|
9天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
39 1
|
20天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
100 0
|
20天前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
|
20天前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
1月前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
56 0
|
1月前
|
JavaScript 前端开发 Java
【前端基础篇】JavaScript之BOM介绍
【前端基础篇】JavaScript之BOM介绍
30 0
|
1月前
|
JavaScript 前端开发 UED
【前端基础篇】JavaScript之DOM介绍2
【前端基础篇】JavaScript之DOM介绍
20 0
|
20天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。