借用构造函数继承与组合继承

最新推荐文章于 2023-07-26 15:44:10 发布

黄酱！

最新推荐文章于 2023-07-26 15:44:10 发布

阅读量216

点赞数

分类专栏： JS 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/tianranran/article/details/122952090

版权

JS 专栏收录该内容

91 篇文章 2 订阅

订阅专栏

//构造函数本质上也是一个函数类型，既然是一个函数类型，可以把它当成普通函数来调用
        // function Person(name, age){
        //     this.name = name
        //     this.age = age 
        //     console.log(this.name)    
        //     console.log(this.age)
        // }
        // Person('冯建炜', 2)
        // let p1 = new Person('柯真宏', 16)
        // console.log(p1)

        //父类构造函数
        function Person(name, age){
            this.name = name
            this.age = age 
        }
        Person.prototype.cart = function(){
            console.log('他爹车技贼溜!')
        }
        //子类构造函数
        function Student(score, name, age){
            this.score = score
            //console.log(this)
            //借用构造函数继承
            Person.call(this, name, age)
        }
        let s1 = new Student(99, '邢晨', 22)
        console.log(s1)

        // let obj = {
        //     name: '张三'
        // }
        // function fn(){
        //     console.log(this.name)
        // }
        // fn.call(obj)

//组合继承：原型继承和借用构造函数继承的结合体
        //父类构造函数
        function Person(name, age) {
            this.name = name
            this.age = age
        }
        Person.prototype.cart = function () {
            console.log('他爹车技贼溜!')
        }
        //子类构造函数
        function Student(score, name, age) {
            this.score = score
            //console.log(this)
            //借用构造函数继承
            Person.call(this, name, age)
        }
        Student.prototype = new Person()

        let s1 = new Student(99, '邢晨', 22)
        console.log(s1)
        s1.cart()

ES6继承
// function Person(name, age) {
        //     this.name = name
        //     this.age = age
        // }
        // Person.prototype.cart = function () {
        //     console.log('他爹车技贼溜!')
        // }

        class Person{
            constructor(name, age){
                this.name = name
                this.age = age
            }
            cart(){
                console.log('他爹车技贼溜!')
            }
        }
        class Student extends Person{
            //注意点：ES6继承是一个固定的写法，构造器里面的参数需要写，super里面的参数也需要写
            constructor(name, age, score){
                //注意点：super必须放在自己参数的前面，因为先继承过来后，才能使用自己的。继承过来的东西
                //都是一些共用的
                super(name, age)
                this.score = score
            }
        }
        let s1 = new Student('邢晨', 18, 99)
        console.log(s1)
        s1.cart()

案例
<style>
        *{
            margin: 0;
            padding: 0;
        }
        /*注意点：当咱们的html和body标记没有设置高度的时候，浏览器默认不会把它高度撑开，由里面的子元素撑开*/
        html, body{
            height: 100%;
        }
        div{
            width: 200px;
            height: 200px;
            position: absolute;
        }
        .box1{
            background-color: yellow;
        }
        .box2{
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <script>
        //使用面向对象
        class Drag{
            constructor(ele){
                //获取元素
                this.box1 = document.querySelector(ele)
                //调用初始化方法
                this.init()
            }
            init(){
                this.down()
                this.move()
                this.up()
            }
            down(){
                this.box1.onmousedown = (e)=>{
                    e = e || window.event
                    let l = e.pageX - this.box1.offsetLeft
                    let t = e.pageY - this.box1.offsetTop
                    this.move(l, t)
                }
            }
            //简单拖拽功能
            move(l, t){
                document.onmousemove = (e)=>{
                    e = e || window.event
                    let x = e.pageX - l
                    let y = e.pageY - t
                    this.box1.style.left = x + 'px'
                    this.box1.style.top = y + 'px'
                }
            }
            up(){
               document.onmouseup = ()=>{
                    document.onmousemove = null
               }
            }
        }
        new Drag('.box1')

        class Drag2 extends Drag{
            constructor(ele){
                super(ele)
                this.box1 = document.querySelector(ele)
            }
            //重新move功能，有限定范围功能
            move(l, t) {
                document.onmousemove = (e) => {
                    e = e || window.event
                    let x = e.pageX - l
                    let y = e.pageY - t
                    if(x<=0){
                        x = 0
                    //document.documentElement表示html标记
                    }else if(x>=document.documentElement.offsetWidth - this.box1.offsetWidth){
                        x = document.documentElement.offsetWidth - this.box1.offsetWidth
                    }
                    if(y<=0){
                        y = 0
                    }else if(y>=document.documentElement.offsetHeight - this.box1.offsetHeight){
                        y = document.documentElement.offsetHeight - this.box1.offsetHeight
                    }
                    this.box1.style.left = x + 'px'
                    this.box1.style.top = y + 'px'
                }
            }
        }
        new Drag2('.box2')
    </script>
</body>

黄酱！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
借用构造函数继承与组合继承

//构造函数本质上也是一个函数类型，既然是一个函数类型，可以把它当成普通函数来调用 // function Person(name, age){ // this.name = name // this.age = age // console.log(this.name) // console.log(this.age) // } // Person('冯
复制链接

扫一扫