字符串扩展、面向对象

本文详细介绍了ES6中的字符串扩展特性,包括模板字符串、startsWith和endsWith方法以及repeat函数。同时,文章深入探讨了面向对象编程的基本概念,对比了面向过程和面向对象的区别,并讲解了对象、类的创建及类继承的相关知识,包括使用构造函数和class关键字创建对象、类中方法的定义、super关键字的使用等。
摘要由CSDN通过智能技术生成

一、字符串扩展

1.模块字符串

模板字符串可以解析变量,使用于大段的字符串而且里面有变量的解析

模板字符串可以解析变量

 let year = 2021;
 let month = 11;
 let day = 16;
 let str = `今年是${year}年${month}月${day}号`; //今年是2021年11月16号

模板字符串里面可以换行,美观

 let str2 = `<h3>${year}</h3>
                  <p>${month}</p>`;
 document.write(str2);

 模块字符串中可以嵌套函数

 const fn = () => {
        return "hello";
 };
 const str = `${fn()}`;
 console.log(str);

 

2.startsWith和endsWith 

startsWith是判断字符串以什么开头 endsWith是判断字符串以什么结束

let str = "hello";
let res1 = str.startsWith("h");
let res2 = str.endsWith("o");
console.log(res1, res2);

 

3.repeat 

let str = "hello".repeat(2);
console.log(str);

 

二、面向对象

1.面向过程和面向对象

面向过程

面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。

面向对象

面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。

2.对象和类

对象

对象是由属性和方法组成的:是一个无序键值对的集合,指的是一个具体的事物

-创建对象 方式1

字面量的方式创建对象

var obj1={
    name:'tom',
    age:23,
    score:89
}

-创建对象 方式2 构造函数的方式创建对象

function Person(name,age){
    this.name=name;
    this.age=age;
}

var obj2=new Person('name',23);//实例化构造函数,创建对象

类 

-在 ES6 中新增加了类的概念,可以使用 class 关键字声明一个类,之后以这个类来实例化对象。

创建类语法

//步骤1 使用class关键字
class name {
  //属性和方法
}     
//步骤2使用定义的类创建实例  注意new关键字
var xx = new name(); 

 类中添加方法

 // 1. 创建类 class  创建一个类
class Person {
    // 类的共有属性放到 constructor 里面 constructor是 构造器或者构造函数
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
    //注意,方法与方法之间不需要添加逗号
    say(sex) {
      console.log(this.name + '说' + this.age+sex);
    }
}
// 2. 利用类创建对象 new
var obj = new Person('jim', 22);
console.log(obj); // Person {name: "jim", age: 22}
obj.say('男'); // jim说22男

类继承

// 父类
class Father{   
} 

// 子类继承父类
class  Son  extends Father {  
}  

super

子类使用super关键字访问父类的方法

    //定义了父类
      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调用了父类中的构造函数
        }
      }
      var son = new Son(10, 20);
      son.sum(); //结果为30

子类添加自定义的方法

// 父类有加法方法
 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 调用父类的构造函数 super 必须在子类this之前调用,放到this之后会报错
   super(x, y);
   this.x = x;
   this.y = y;

  }
  subtract() {
  console.log(this.x - this.y);
  }
}
var son = new Son(5, 3);
son.subtract(); //2  调用子类自己的减法方法
son.sum();//8  调用了继承的父类的加法方法
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值