关于Harmony的学习

最新推荐文章于 2024-10-13 10:28:46 发布
最新推荐文章于 2024-10-13 10:28:46 发布
阅读量1k 收藏 7
点赞数 20
文章标签： 学习 javascript 前端 原型模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72035166/article/details/142181655
版权

day29

一、函数柯里化

又译为卡瑞化或加里化 是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数 并且返回接受余下的参数而且返回结果的新函数的技术 作用： 可以固定相同参数，实现函数调用传参的简单化 可以让参数复用

1.输出一个完整的url地址：一定要把不变的参数放在第一位

    function printUrl(protocol){
        return function(domain){
            return function(port){
                return protocol + domain + port
            }
        }
    }
    let result = printUrl('https://')
    let url1 = result('www.baidu.com')(':8080')
    let url2 = result('www.jd.com')(':6666')
    console.log(url1)
    console.log(url2)

2.假设你是一个商家，要出售商品，为了卖出去更多的商品，今天决定打9折进行售卖，我们可以使用以下函数进行折扣后的售出价格计算

    function discPrice(disc){
        return function(price){
            return price * disc
        }
    }
    let result = discPrice(.8)
    let price1 = result(1000)
    let price2 = result(2000)
    console.log(price1)
    console.log(price2)

二、原型继承

继承是把一个构造函数的属性和方法继承到另一个构造函数里面，而继承必须是同类之间的继承。

原型继承：利用了原型链的规则来实现继承

1.

    // 父类构造函数
    function Father(name, age){
        this.name = name
        this.age = age
    }
    Father.prototype.money = function(){
        console.log('一个小目标')
    }
​
    // 子类构造函数
    function Son(name, age){
        this.name = name
        this.age = age
    }
​
    Son.prototype = Father.prototype
    Son.prototype.love = function(){
        console.log('谈恋爱')
    }
​
    let s1 = new Son('张三', 18)
​
    s1.money()
    s1.love()
​
    let f1 = new Father('张', 36)
    f1.money()
    f1.love()
​
    console.log(Father.prototype, Son.prototype)

2.

    // 父类构造函数
    function Father(name, age){
        this.name = name
        this.age = age
    }
    Father.prototype.money = function(){
        console.log('一个小目标')
    }
​
    // 子类构造函数
    function Son(name, age){
        // this.name = name
        // this.age = age
    }
​
    // 把父元素的实例化对象赋值给子类的原型对象了
    Son.prototype = new Father('张三', 18)
    Son.prototype.love = function(){
        console.log('谈恋爱')
    }
​
    let s1 = new Son()
​
    s1.money()
    s1.love()
​
    console.log(s1.name, s1.age)

三、继承

1.借用构造函数继承

    // 父类构造函数
    function Father(name, age){
        this.name = name
        this.age = age
        this.say = function(){
            console.log('hello')
        }
​
        console.log('-------',  this)
    }
    Father.prototype.money = function(){
        console.log('一个小目标')
    }
​
    // 子类构造函数
    function Son(name, age){
        // 借用构造函数继承
        Father.call(this, name, age)
    }
​
    let s = new Son('张三', 18)
    console.log(s)

2.组合继承

    // 父类构造函数
    function Father(name, age){
        this.name = name
        this.age = age
        this.say = function(){
            console.log('hello')
        }
    }
    Father.prototype.money = function(){
        console.log('一个小目标')
    }
​
    // 子类构造函数
    function Son(name, age){
        // 借用构造函数继承
        Father.call(this, name, age)
    }
    Son.prototype = new Father()
​
    let s = new Son('张三', 18)
    console.log(s)
​
    s.money()

3.ES6继承

    // ES6继承原理还是组合继承
    class Father {
        constructor(name, age){
            this.name = name
            this.age = age
        }
        money(){
            console.log('一个小目标')
        }
    }
    
    class Son extends Father {
        constructor(name, age, sex){
            // super(name, age) 其实就是借用构造函数继承
            super(name, age, sex)
            this.sex = sex
            this.init()
        }
        init(){
            console.log('初始化方法')
        }
    }
​
    let s = new Son('张三', 18, '男')
    console.log(s)
​
    s.money()
​
    console.log(Son.prototype)

四、拷贝

1.浅拷贝 对象的复制只是复制对象的引用，可以改变原始数据的值。 基本数据类型拷贝过去是直接拷贝，而引用数据类型拷贝则拷贝的是地址

    let obj = {
        name: '张三',
        age: 18,
        like: ['篮球', 'rap', '剧本杀']
    }
    let obj2 = {}
    for(let key in obj){
        obj2[key] = obj[key]
    }
    obj2.like[0] = '唱歌'
    obj2.name = '张'
    console.log(obj, obj2)

2.深拷贝（直接修改可能会造成隐性问题，深拷贝能帮你更安全安心的去操作数据，根据实际情况来使用深拷贝） 彻底复制一个对象，而不是简单的拷贝对象的引用，拷贝后不能修改原始数据的值 只有基本数据类型可以完全拷贝，拷贝的不是地址。因此利于这个规则实现深拷贝

    let obj = {
        name: '张三',
        age: 18,
        like: ['篮球', 'rap', '剧本杀']
    }
    let obj2 = JSON.parse(JSON.stringify(obj))
    obj2.like[0] = '🎤'
    console.log(obj, obj2)

五、数据劫持（对对象的限定）

1.Object.defineProperty()

参数：=> 参数1表示那个对象需要劫持

=> 参数2表示的是设置那个属性

=> 参数3表示的是对这个属性的限定（配置项，类型是一个对象）

       let obj = {
          name: '张',
          age: 18,
          sex: '男'
       }
   console.log(obj.name)
   for(let key in obj){
       console.log(obj[key])
   }
   delete obj.name
   console.log(obj)

注意点：被劫持的对象，通过劫持的方式设置的属性和值，为了做区分，当咱们打印查看结果时，劫持设置的值你是看不到，会默认放在一个括号里面

2.配置项：=> value: 该属性对应的值, ​ => configurable 该属性是否能被删除 ​ => writable: 该属性时候可被重写, 默认是 false ​ => emunerable: 该属性是否可被枚举（遍历）, 默认是 false ​ => get: 是一个函数, 叫做 getter 获取器, 可以来决定该属性的值 ​ -> get 函数的返回值, 就是当前这个属性的值 ​ -> 注意: 不能和 value 和 writable 一起使用, 会报错 ​ => set: 是一个函数, 叫做 setter 设置器, 当你需要修改该属性的值的时候, 会触发该函数

   let obj = {
        age: 18,
        sex: '男'
    }
    Object.defineProperty(obj, 'name', {
        value: '陈',
        configurable: false,
        writable: false,
        enumerable: false
    })
    // delete obj.name
    // obj.name = '张'
    for(let key in obj){
        console.log(obj[key])
    }
    // console.log(obj)

3.get和set：

    let obj = {
        age: 18,
        sex: '男'
    }
    let _name = 'hello'
    Object.defineProperty(obj, 'name', {
        // 获取器，肯定是先有值，才能获取
        get(){
            console.log('我的属性被获取了')
            return _name
        },
        set(value){
            console.log('我的属性被修改了')
            _name = value
        }
    })
    console.log(obj.name)
    obj.name = ''
    console.log(obj.name)

4.

    // 目标对象，要被劫持的目标对象
    let target = {}

    // 专门用来设置属性的对象，它的作用和刚才那个_name全局变量的作用是一样的
    let setObj = {
        name: '陶',
        age: 18
    }
    Object.defineProperty(target, 'name', {
        get(){
            console.log('我的属性被获取了')
            return setObj.name
        },
        set(value){
            console.log('我的属性被修改了')
            setObj.name = value
        }
    })
    Object.defineProperty(target, 'age', {
        get(){
            console.log('我的属性被获取了')
            return setObj.age
        },
        set(value){
            console.log('我的属性被修改了')
            setObj.age = value
        }
    })
    console.log(target.name)
    target.name = '张'
    console.log(target.name)

    console.log(target)

5.封装

    let setObj = {
        name: '',
        age: 18,
        sex: '男'
    }

    // 参数1表示给目标对象设置值的对象
    // 参数2表示回调函数
    function reactive(setObj, callback){
        let target = {}
        for(let key in setObj){
            Object.defineProperty(target, key, {
                get(){
                    return setObj[key]
                },
                set(value){
                    setObj[key] = value
                    // if(callback){
                    //     callback(target)
                    // }
                    // 优雅的写法，利于短路运算符
                    callback && callback(target)
                }
            })
        }
        return target
    }
    let result = reactive(setObj, render)
    
    function render(result){
        document.querySelector('h1').innerHTML = `大家好，我就是曾经江湖中的传说，${result.name}, 他的年龄是：${result.age}，他的性别是：${result.sex} `
    }
    render(result)

6.数据劫持升级

    let setObj = {
        name: '张',
        age: 18
    }
    // Object.defineProperty()
    let target = {}
    Object.defineProperties(target, {
        'name': {
            get(){
                return setObj.name
            },
            set(value){
                setObj.name = value
            }
        },
        'age': {
            get(){
                return setObj.age
            },
            set(value){
                setObj.age = value
            }
        }
    })
    console.log(target)

7.ES6_Proxy

    let setObj = {
        name: '张三',
        age: 18,
        sex: '女'
    }
    function reactive(data, callback){
        return new Proxy(data, {
            get(target, property){
                return target[property]
            },
            set(target, property, value){
                target[property] = value
                callback && callback(target)
            }
        })
    }
    let result = reactive(setObj, render)
    function render(result){
        document.querySelector('h1').innerHTML = `大家好，我就是曾经江湖中的传说，${result.name}, 他的年龄是：${result.age}，他的性别是：${result.sex} `
    }
    render(result)

    console.log(result)

六、响应式数据（数据改变，界面跟着变）

    let setObj = {
        name: '张',
        age: 18
    }
    let target = {}
    Object.defineProperty(target, 'name', {
        get(){
            return setObj.name
        },
        set(value){
            setObj.name = value
            render(target)
        }
    })
​
    Object.defineProperty(target, 'age', {
        get(){
            return setObj.age
        },
        set(value){
            setObj.age = value
            render(target)
        }
    })
    
    function render(target){
        document.querySelector('h1').innerHTML = `大家好，我就是曾经江湖中的传说，${target.name}, 他的年龄是：${target.age} `
    }
    render(target)
yiyiy111yiy
关注
零基础小白如何入门HarmonyOS鸿蒙应用开发学习？_纯血harmony学习
jixuczy的博客
04-11 922
（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）**技术知识点。目前，有许多线上和线下活动可以帮助我们更好地了解HarmonyOS鸿蒙应用开发的技术和市场趋势。在了解了HarmonyOS鸿蒙系统的基本概念和特点之后，我们需要学习一些基础知识，例如Java编程语言、Android应用开发等。
HarmonyOS开发学习路线图.pdf
11-15
对于想要学习和开发HarmonyOS应用的人员，以下是一个详细的HarmonyOS开发学习路线图，涵盖了从初阶到高阶的各项技能和知识点。 1. **初阶应用测试** - **HarmonyOS基础知识**：理解HarmonyOS的操作系统架构，包括...
Harmony学习手册
Wu_Lingang的博客
06-26 594
Harmony学习手册
Harmony学习
lmy1900019692的博客
05-17 528
harmony学习
HarmonyOS学习——组件篇
张豆豆的博客
02-05 712
harmonyOS学习-基础组件
HarmonyOS应用开发学习经验
qq_42396791的博客
06-25 502
HarmonyOS
鸿蒙(HarmonyOS)学习路线总结
安辉
09-05 1585
以上的内容都简单过了一遍，去开发者学堂把相关基础视频看一遍，就能做项目了，边做边学如果您想第一时间看我的后期文章，扫码关注公众号安辉编程笔记 - 开发技术分享扫描二维码加关注。
HarmonyOS学习
m0_51577196的博客
07-13 435
HarmonyOS学习
HarmonyOS学习——HarmonyOS习题
张豆豆的博客
03-05 9735
HarmonyOS课程学习随堂测试题整理
鸿蒙HarmonyOS4.0开发应用学习笔记
用作学习记录
12-03 4064
鸿蒙harmonyos4.0学习笔记
Harmony OS学习2
weixin_51250562的博客
07-05 658
鸿蒙应用的配置文件：config.json Android 里面的是xml格式，HarmonyOS是Json
HarmonyOS学习路径图.rar
09-23
本压缩包文件"HarmonyOS学习路径图.rar"包含了高清的学习路径图，是华为为超过5万开发者充电的重要资源，体现了HarmonyOS充电节活动的成功。 学习路径图是新手入门或专业人士深入理解HarmonyOS的关键工具。它清晰地...
HarmonyOs 学习资料.zip
06-20
本篇将围绕"HarmonyOs 学习资料.zip"提供的压缩包内容，深入解析鸿蒙系统的开发理念、工具、生态案例和技术细节。 首先，我们关注的是鸿蒙开发的核心工具——DevEco Studio。它是华为专为HarmonyOS打造的集成开发...
华为鸿蒙系统HarmonyOS学习之鸿蒙开发环境搭建
12-29
在深入学习华为鸿蒙系统HarmonyOS之前，首要任务是搭建一个完整的开发环境。本文将详细讲解如何进行鸿蒙开发环境的搭建，包括安装Node.js环境和设置HUAWEI DevEco Studio IDE。 一、安装Node.js环境 Node.js是...
关于通信方式的一些自我学习（uart、i2c、spi的一些最底层的逻辑以及运用方式）STM32F407上的一些实际日常应用
weixin_60991529的博客
10-08 1244
首先其工作原理是将数据以串行方式进行发的，接收的时候将数据转换为并行数据。利用异步通信所以不需要时钟线适用于不同芯片、芯片对模块之间的控制。因此需要设置好波特率（115200、9500）数据位、停止位、奇偶效验位。
MySQL数据库的详细学习步骤
2401_87352036的博客
10-11 1101
MySQL数据库的详细学习步骤可以归纳为以下几个阶段，每个阶段都包含了特定的学习内容和目标。
springboot实战学习（12）(优化更新用户基本信息接口)(Validation实体参数校验)
岁岁岁平安的博客
10-09 949
本篇博客主要是对用户模块的更新用户基本信息接口的代码的一个小优化（实体参数校验）。其中用到了Spring Validation参数校验框架提供的一些注解（如@NotNull、@NotEmpty、@Email、@Validated）去完成实体类对象的参数校验以及完成了功能的测试...
2024年网络安全进阶学习路径-2024年进阶学习指南
2401_85026965的博客
10-10 1960
网络安全可以基于攻击和防御视角来分类，我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。走安全行业的工程方向的，技术上面其实有很大的重叠性，抛开甲乙方、岗位名称、岗位职责等因素来看，作为学技术的，也根据以往我们给学员推荐就业和入职情况来看，只要好好掌握以下几种技术（网络协议与安全设备、Linux操作系统、Web服务部署/开发、主流渗透测试/安全工具、一门及以上的编程语言）中的2到3个，都可以较好的胜任工作需求。
论文及其创新点学习cvpr2022 On the Integration of Self-Attention and Convolution
最新发布
qq_53536373的博客
10-13 161
论文创新点，将注意力机制 和卷积 相结合。
HarmonyOS高级开发者指南详解
同时，HarmonyOS应用开发还需要学习HarmonyOS的开发框架和API。 4.HarmonyOS应用高级开发技巧： 高级开发技巧包括对HarmonyOS的分布式技术、模块化技术、跨设备协同技术的深入了解和应用。这些技术使得HarmonyOS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值