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);



二、给类添加方法


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


举例:

 

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('中国');


三、类的继承(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();//可以获取父类的内容



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);//获取子类所添加的内容
//在实际开发中,可以通过调用来节省时间,在调用的基础上增加,所需要的内容。

3.调用父类的普通函数

父类:

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


子类:

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


微信图片_20220926230207.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());


相关文章
|
6月前
|
前端开发 JavaScript 安全
javascript:void(0);用法及常见问题解析
【6月更文挑战第3天】JavaScript 中的 `javascript:void(0)` 用于创建空操作或防止页面跳转。它常见于事件处理程序和超链接的 `href` 属性。然而,现代 web 开发推荐使用 `event.preventDefault()` 替代。使用 `javascript:void(0)` 可能涉及语法错误、微小的性能影响和XSS风险。考虑使用更安全的替代方案,如返回 false 或箭头函数。最佳实践是保持代码清晰、安全和高性能。
365 0
|
3月前
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
随着互联网的发展,网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具,可在Node.js环境中模拟用户行为,高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能,通过设置代理IP、User-Agent和Cookies等技术,实现复杂的Web Scraping任务,并提供示例代码,展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数,开发者可以有效规避目标网站的反爬机制,提升数据抓取效率。
313 4
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
1月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
27 1
|
1月前
|
JavaScript 前端开发
JS中的构造函数的含义和用法
构造函数是JavaScript中用于创建新对象的特殊函数,通常首字母大写。通过`new`关键字调用构造函数,可以初始化具有相同属性和方法的对象实例,从而实现代码复用。例如,定义一个`Person`构造函数,可以通过传入不同的参数创建多个`Person`对象,每个对象都有自己的属性值。此外,构造函数还可以包含方法,使每个实例都能执行特定的操作。构造函数的静态属性仅能通过构造函数本身访问。ES6引入了`class`语法糖,简化了类的定义和实例化过程。
31 1
|
2月前
|
JavaScript 前端开发
JS try catch用法:异常处理
【10月更文挑战第12天】try/catch` 是 JavaScript 中非常重要的一个特性,它可以帮助我们更好地处理程序中的异常情况,提高程序的可靠性和稳定性。
34 1
|
2月前
|
JavaScript 前端开发
js的math.max的用法
js的math.max的用法
58 6
|
2月前
|
JavaScript
JS中的splice的三种用法(删除,替换,插入)
JS中的splice的三种用法(删除,替换,插入)
281 4
|
3月前
|
数据采集 存储 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
在现代Web开发中,数据采集尤为重要,尤其在财经领域。本文以“东财股吧”为例,介绍如何使用Puppeteer结合代理IP技术进行高效的数据抓取。Puppeteer是一个强大的Node.js库,支持无头浏览器操作,适用于复杂的数据采集任务。通过设置代理IP、User-Agent及Cookies,可显著提升抓取成功率与效率,并以示例代码展示具体实现过程,为数据分析提供有力支持。
140 2
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
3月前
|
JavaScript 前端开发
JavaScript用法
JavaScript用法
|
2月前
|
前端开发 JavaScript 开发者
深入理解JavaScript中的Promise:用法与最佳实践
【10月更文挑战第8天】深入理解JavaScript中的Promise:用法与最佳实践
103 0