当前位置：网站首页>Borrowing constructor inheritance and composite inheritance

Borrowing constructor inheritance and composite inheritance

2022-07-01 02:45:00 【Yellow sauce!】 

// A constructor is essentially a function type , Since it is a function type , You can call it as an ordinary function 
        // function Person(name, age){
    
        //     this.name = name
        //     this.age = age 
        //     console.log(this.name)    
        //     console.log(this.age)
        // }
        // Person(' Fengjianwei ', 2)
        // let p1 = new Person(' Ke Zhenhong ', 16)
        // console.log(p1)

        // Parent constructor 
        function Person(name, age){
    
            this.name = name
            this.age = age 
        }
        Person.prototype.cart = function(){
    
            console.log(' His father is a thief !')
        }
        // Subclass constructor 
        function Student(score, name, age){
    
            this.score = score
            //console.log(this)
            // Inheritance by borrowing the constructor 
            Person.call(this, name, age)
        }
        let s1 = new Student(99, ' Xing Chen ', 22)
        console.log(s1)

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

// Combination inheritance ： A combination of prototype inheritance and borrowing constructor inheritance 
        // Parent constructor 
        function Person(name, age) {
    
            this.name = name
            this.age = age
        }
        Person.prototype.cart = function () {
    
            console.log(' His father is a thief !')
        }
        // Subclass constructor 
        function Student(score, name, age) {
    
            this.score = score
            //console.log(this)
            // Inheritance by borrowing the constructor 
            Person.call(this, name, age)
        }
        Student.prototype = new Person()

        let s1 = new Student(99, ' Xing Chen ', 22)
        console.log(s1)
        s1.cart()

ES6 Inherit 
// function Person(name, age) {
    
        //     this.name = name
        //     this.age = age
        // }
        // Person.prototype.cart = function () {
    
        //     console.log(' His father is a thief !')
        // }

        class Person{
    
            constructor(name, age){
    
                this.name = name
                this.age = age
            }
            cart(){
    
                console.log(' His father is a thief !')
            }
        }
        class Student extends Person{
    
            // Be careful ：ES6 Inheritance is a fixed way of writing , The parameters in the constructor need to be written ,super The parameters inside also need to be written 
            constructor(name, age, score){
    
                // Be careful ：super It must be placed in front of its own parameters , Because I inherited it first and then , To use your own . Inherited things 
                // They are all shared 
                super(name, age)
                this.score = score
            }
        }
        let s1 = new Student(' Xing Chen ', 18, 99)
        console.log(s1)
        s1.cart()

 Case study 
<style>
        *{
    
            margin: 0;
            padding: 0;
        }
        /* Be careful ： When we are html and body When the mark has no height , By default, the browser will not hold it high , Supported by the child elements inside */
        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>
        // Use object-oriented 
        class Drag{
    
            constructor(ele){
    
                // Get elements 
                this.box1 = document.querySelector(ele)
                // Call initialization method 
                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)
                }
            }
            // Simple drag and drop function 
            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)
            }
            // again move function , It has limited scope function 
            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 Express html Mark 
                    }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>
原网站

版权声明
本文为[Yellow sauce!]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202160353520097.html

边栏推荐

猜你喜欢

随机推荐