前端面试秘法
提高个人编程能力就是不停的敲代码
这里我推荐一款前端面试神器----->点击跳转学习??????? 系列内容请关注:前端面试
文章图片
目录
前言
一、类的定义(class)
语法:
二、给类添加方法
三、类的继承(extends、调用super())
1.继承父类普通属性
2.调用父类的构造函数
3.调用父类的普通函数
四、私有属性的获取
语法:
前言 JavaScript 语言中,生成实例对象的传统方法是通过构造函数,ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。
一、类的定义(class) 使用class关键词 声明类,constructor为构造方法,一个类必须有constructor()方法,如果没有显式定义,一个空的constructor()方法会被默认添加,this关键字则代表实例对象。
注意:不需要在使用function(){}
语法: 基本语法
class Name {}
创建实例:
varp1 = 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();
文章图片
四、私有属性的获取 语法:
#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());
【#|牛客刷题——前端面试【二】谈一谈JavaScript面向对象】
文章图片
结束语: 这里推荐大家可以有效提高个人能力的平台 前端面试神器----->点击跳转 让我们一起进步,拿到自己想要的offer
推荐阅读
- #|【Vue 路由(vue—router) 一】介绍、基本使用、嵌套路由
- #|【 探讨一下 】Vue的生命周期
- #|通过JavaScript、css、H5 实现简单的tab栏的切换和复用
- #|【vue 组件化开发 一 】组件基本使用、全局和局部组件、父组件和子组件的区别
- #|通过JavaScript 实现简单的全选、不全选的思想
- #|ES6中Array对象的方法和扩展、string的扩展方法、数组的遍历。(含例题)
- Vue基础知识|vue-router4之路由传参
- 开课吧-Web前端面试涨薪名企培养计划完结无密
- css相关|css实现元素水平垂直居中——6种方式