搞懂js面向对象之进阶篇

时间:2021-1-8 作者:admin

构造函数

function Dad(){

    //私有成员-只有公有方法才能调取
    let _weight='80kg';

    this.age=20
};

//静态属性-只能通过类来调用,实例化对象是调用不了的
Dad.num=10;

//静态方法-只能通过类来调用,实例化对象是调用不了的
Dad.getNum=function(){cosole.log('静态方法')}

Dad.prototype.add=function(){console.log(this.age)};


//只使用Dad.call(this)只能继承父类的实例化对象上的属性和方法
//继承不到原型链上的属性方法
function Son(){Dad.call(this)};

//精髓之句
Son.prototype=new Dad();

//每次通过new运算符创建的实例化对象都是互不干扰的
var xx=new Son();
console.log('xx',xx.age); //'xx' 20


var xxv=new Son(); 
xxv.age=22;
console.log('xxv',xxv.age) //'xxv' 22


xx.add() //20
xxv.add() //22

console.log(xx) //如下图的结构

ES6类的运用

  • 构造函数对私有属性的实现方式

  • es6类对私有属性的实现方式


console.log(typeOf Coder)  //'function'
//函数是一等对象


class Coder{
    //私有属性只有在类内部能被调用。
    //es6将私有属性放在了实例化对象上
    //但是想要通过实例化对象.私有属性的方式获取是拿不到的
    #weight='80kg'


    //这种是通过公有方法调取私有属性
    getWeight(){
        return this.#weight
    }

    //与类相关性强的属性并且和实例化对象的相关性不强的属性可以考虑使用静态属性像Math.Pi、Promise.resolve……
    //静态属性是通过类直接调用的
    //实例化对象是调用不到静态属性的
    //es5写法为Coder.name=function(){}

    static name(val){
        console.log(val);
        return val;
    }


    //es5写法为Coder.num=10。属于静态属性。只能通过类调用
    static num=10;

    //省略static后会自动在实例化对象上添加this.age=10;
    age=10;

    constructor(a,b){
        this.a=a;
        this.b=b;
        this.fn=function(){
            console.log('实例对象身上的方法')
        }
    }

     //自动被添加到了Coder.prototype上
    add(){
        return this.a+this.b;
    }

    //自动被添加到了Coder.prototype上
    hobby(){
        console.log('我在原型上')
    }
}


let shuang=new Coder(1,2);
console.log(shuang);

//原型上的属性
Coder.prototype.shuxing=110

Coder.num //10

构造函数的继承

function Dad(height){
    this.name='zhangsan';
    this.height=height
}

function Son(height){
    Dad.call(this,height)
}

let zhangsan=new Son('178')

console.log(zhangsan)

ES6类的继承

class Dad{
    static num=10;
    constructor(height){
        this.name='张三';
        this.height=hright
    }
}



//解决了原型继承引用的问题
class  Son extends Dad{
    constructor(){
            //必须写在实例化对象其他的属性方法之前
            //通过super把父类的constructor和子类的constructor联系了起来
            super(height);
            this.weight='80kg'
    }
}

console.log(Son.num) //10

利用ES6类和ES6模块化构造出数据的案例

  • 需求:构造一个管理类,该管理类包含一个登录方法(原型上的方法:在玩家登录后创建一个玩家类)和一个玩家类。

  • 该玩家类具有玩家名字(实例化对象上的属性)和一个英雄类。

  • 该英雄类有英雄名字、图标(实例化对象上的属性)和一个技能类和一个皮肤类

  • 终极目标数据如下

  • 在还没有执行登录方法时的管理类数据是

  • 利用es6类构造出Game
//需要在这引入玩家类player
import Player from './player.js';

export default class Game{
    constructor(){
        this.player = null;
    }
    login(name){ 
        this.player = new Player(name);
    }
}
  • 利用es6类构造出玩家类
//需要在这引入英雄类
import Yase from './heroes/yase.js';
import Luban from './heroes/luban.js';


export default class Player{
    constructor(name){
        this.name = name;
        this.heroes = [new Yase(),new Luban()];
    } 
}
  • 利用es6类构造出英雄类(这里以luban类为例)
//同理需要在这里以es6模块化的方式引入技能类和皮肤类


export default class luban{
    constructor(){
        this.name='鲁班1';
        this.ico='./sources/heros/luban1.png'
        this.skills=[new S1(),new S2(),new S3()];
        this.skins=[new K1(),new K2()]
    }
}
  • 利用es6类构造出技能类
export default class S1{
    constructor(){
        this.name='技能一';
        this.ico='./sources/skills/11210.png'
    }
}
  • 利用es6类构造出皮肤类
export default class K1{
    constructor(){
        this.name='皮肤一'
        this.ico='./sources/skins/301120.png'
    }
}

拓展学习

  • localStorage的实际应用场景

  • 1.存储数组格式的内容

//右边传值虽然是数组格式但是会自动转为字符串格式
localStorage.setItem('arrToString',[1,1,1,0]);

localStorage.getItem('arrToString')
//"1,1,1,0"


//如果想要在恢复成数组格式可以使用split
localStorage.getItem('arrToString').split(',') 
//["1", "1", "1", "0"]
  • 2.存储对象格式的内容
localStorage.setItem('objToString',{a:0,b:1});

localStorage.getItem('objToString');
//"[object Object]"

localStorage.setItem('objToString',JSON.stringify({a:0,b:1}));

JSON.parse(localStorage.getItem('objToString')); 
//{a: 0, b: 1}
  • 3.在不支持localStorage的浏览器下可以考虑使用cookie
//存储,IE6~7 cookie 其他浏览器HTML5本地存储

if (window.localStorage) {
    localStorage.setItem("data", data);
} else {
    Cookie.write("data", data);
}


var getStore = window.localStorage? localStorage.getItem("data"): Cookie.read("data");
  • 合并空运算符(??)

  • 1.空值合并操作符(??)是一个逻辑操作符,当左侧的操作数为 null 或者undefined时,返回其右侧操作数,否则返回左侧操作数。

const b = 0 || 42;
console.log(b); //42

const b = 0 ?? 42;
console.log(b); //0

  • 2.由于||是一个布尔逻辑运算符,左侧的操作数会被强制转换成布尔值用于求值。任何假值(0, '', NaN, null, undefined)都不会被返回。这导致如果你使用0,''或NaN作为有效值,就会出现不可预料的后果。
let count = 0;
let text = "";

let qty = count || 42;
let message = text || "opps!";
console.log(qty);     // 42,而不是 0
console.log(message); // "opps!",而不是 ""


let cqty= 0 ?? 42
console.log(cqty)   //0

let cmessage='' ?? 'opps';
console.log(cmessage) //''

function A() { console.log('函数 A 被调用了'); return undefined; }
function B() { console.log('函数 B 被调用了'); return false; }
function C() { console.log('函数 C 被调用了'); return "foo"; }


console.log( A() ?? C() );
// 依次打印 "函数 A 被调用了"、"函数 C 被调用了"、"foo"。
//因为A() 返回了 undefined,所以操作符两边的表达式都被执行了


console.log( B() ?? C() );
// 依次打印 "函数 B 被调用了"、"false"。
//因为B() 返回了 false(既不是 null 也不是 undefined)
//所以右侧表达式没有被执行
  • 可选链式操作符

  • 可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。

  • ?. 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。

  • 与函数调用一起使用时,如果给定的函数不存在,则返回 undefined。

let obj={}
console.log(obj.mayname.age) //报错
console.log(obj?.mayname.age) //undefined

console.log(obj?.mayname?.age) //undefined
  • 一个存在嵌套结构的对象 obj。不使用可选链的话,查找一个深度嵌套的子属性时,需要验证之间的引用,例如let nestedProp = obj.first && obj.first.second;这句话的意思是先去验证obj.first的值是不是null或者undefined,如果不是在去访问obj.first.second
let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
  • 当尝试调用一个可能不存在的方法时也可以使用可选链。函数调用时如果被调用的方法不存在,使用可选链可以使表达式自动返回undefined而不是抛出一个异常。
let result = someInterface.customMethod?.();

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  },
  someNonExistentMethod(){
      console.log('1')
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined
  • 当在表达式中使用可选链时,如果左操作数是 nullundefined,表达式将不会被计算,例如:
let p = null;
let x = 0;
let prop = p?.[x++];

console.log(x); // x 将不会被递增,依旧输出 0
  • 空值合并操作符可以在使用可选链时设置一个默认值:
let customer = {
  name: "Carl",
  details: { age: 82 }
};

let str='前面是null或者undefined我就发挥作用了'
let customer =  (customer?.city) ?? str;

console.log(customer); // “前面是null或者undefined我就发挥作用了”
  • 不借助node.js环境下实现es6模块化

  • 浏览器默认模块化在script标签里加入 "type=module";

  • 导出的关键字为exportexport可以导出多个,export default只能导出一个;

1.export { a ,b , c};

//利用关键字as
2.export { a as aa ,b , c};

3.export let c = ()=>{console.log("I am function...")};

4.export default a;
  • 导入方式:关键字import
1.要和`export`导出的命名**保持一致**。有加括号
import {a , b , c} from './module.js';


2.没加括号。命名可以自定义
import obj from './module.js';


3.通配符 "*"方式导入
import * as obj from './moduleb.js';


4.按需求延迟导入(模块默认一加载页面就给你导入了)
document.onclick =async function(){
    // import {fn1} from  './fn.js';
    let res = await import("./fn.js");
    console.log(res);
}
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。