javascript面向对象基础(2)-CSDN博客

主题

1）拖拽案例

2）构造函数继承

3）原型的继承

4）拖拽案例的继承改造

5）es6中的类的用法

## 知识点

拖拽的构造函数实现

### 构造函数继承

- 继承：子类继承父类所有属性和行为，父类不受影响。

- 目的：找到类之间的共性精简代码

function Person(name){
this.name = name;
this.eyes = "两只";
this.legs = "两条";
}
function Student(name){
Person.call(this,name)
this.className = "二班";
}
let newPerson = new Student("张三");
console.log(newPerson.className);

- 简单原型继承,出现影响父类的情况；

function Person(name){
this.name = name;
this.eyes = "两只";
this.legs = "两条";
}
function Student(name){
Person.call(this,name)
this.className = "二班";
}
Student.prototype = Person.prototype //直接赋值

### 原型链

原型链是指对象在访问属性或方法时的查找方式。

1.当访问一个对象的属性或方法时，会先在对象自身上查找属性或方法是否存在，如果存在就使用对象自身的属性或方法。如果不存在就去创建对象的构造函数的原型对象中查找，依此类推，直到找到为止。如果到顶层对象中还找不到，则返回 undefined。

2.原型链最顶层为 Object 构造函数的 prototype 原型对象，给 Object.prototype 添加属性或方法可以被除 null 和 undefined 之外的所有数据类型对象使用。

### 原型的深拷贝继承

- 传值和传址问题

- 基本数据类型：Number、String、Boolean、Null、Undefined

- 复杂数据类型/引用数据类型:Array、Date、Math、RegExp、Object、Function等

- JOSN序列化的不足

```

如果拷贝对象包含函数，或者undefined等值，此方法就会出现问题

```

- 浅拷贝和深拷贝

//递归深拷贝
function deepCopy(obj){
let newObj = Array.isArray(obj)?[]:{};
for(let key in obj){
if(obj.hasOwnProperty(key)){
if(typeof obj[key] == "object"){
newObj[key] = deepCopy(obj[key]);
}else{
newObj[key] = obj[key];
}
}
}
return newObj;
}

###原型的继承

- 深拷贝继承

- 组合继承

function Dad(){
this.name = "张三";
}
Dad.prototype.hobby = function(){
console.log("喜欢篮球");
}
function Son(){
Dad.call(this);
}
let F = function(){}
F.prototype = Dad.prototype;
Son.prototype = new F();
Son.prototype.constructor = Son;
 
let newSon = new Son();
newSon.hobby();

### 拖拽的边界需求：通过继承来解决

- 2个div实现拖拽其中第二个需要设置边界不能拖出可视区域

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .mydiv1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }

        .mydiv2 {
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 300px;
        }
    </style>
</head>

<body>
    <div class="mydiv1"></div>
    <div class="mydiv2"></div>
</body>
<script>
    // let mydiv1 = document.querySelector(".mydiv1");
    // let mydiv2 = document.querySelector(".mydiv2");
    // mydiv1.onmousedown = function(e){
    //     let ev = e || window.event;
    //     let x = ev.clientX - mydiv1.offsetLeft;
    //     let y = ev.clientY - mydiv1.offsetTop;
    //     mydiv1.onmousemove = function(e){
    //         let ev = e || window.event;
    //         let xx = ev.clientX ;
    //         let yy = ev.clientY ;
    //         mydiv1.style.left =  xx - x + "px";
    //         mydiv1.style.top =  yy - y + "px";
    //     }
    //     document.onmouseup = function(){
    //         mydiv1.onmousemove = "";
    //     }
    // }

    //拖拽”类“；
    function Drag(ele) {
        this.ele = ele;
        this.downFn();
    }
    Drag.prototype.downFn = function () {
        this.ele.onmousedown = e => {
            let ev = e || window.event;
            let x = ev.clientX - this.ele.offsetLeft;
            let y = ev.clientY - this.ele.offsetTop;
            this.moveFn(x, y);
            this.upFn();
        }
    }
    Drag.prototype.moveFn = function (x, y) {
        this.ele.onmousemove = e => {
            let ev = e || window.event;
            let xx = ev.clientX;
            let yy = ev.clientY;
            this.setStyle(xx - x, yy - y);
        }
    }
    Drag.prototype.setStyle = function (leftNum, topNum) {
        this.ele.style.left = leftNum + "px";
        this.ele.style.top = topNum + "px";
    }
    Drag.prototype.upFn = function () {
        document.onmouseup = () => {
            this.ele.onmousemove = "";
        }
    }


    let mydiv2 = document.querySelector(".mydiv2");

    // let drag1 = new Drag(mydiv1);
    let drag2 = new Drag(mydiv2);
    // 第一拖拽限定范围；---》继承；

    function LimitDarg(ele) {
        Drag.call(this, ele);
    }
    LimitDarg.prototype = deepCopy(Drag.prototype);
    LimitDarg.prototype.constructor = LimitDarg;
    LimitDarg.prototype.setStyle = function (leftNum, topNum) {
        //限定区域；
        if (leftNum < 0) {
            leftNum = 0;
        }
        if (topNum < 0) {
            topNum = 0;
        }
        this.ele.style.left = leftNum + "px";
        this.ele.style.top = topNum + "px";
    }
    let mydiv1 = document.querySelector(".mydiv1");
    let drag1 = new LimitDarg(mydiv1);

    function deepCopy(obj) {
        let newObj = Array.isArray(obj) ? [] : {};
        //循环原型上的东西；
        for (let i in obj) {
            if (obj.hasOwnProperty(i)) {
                if (typeof obj[i] == "object") {
                    newObj[i] = deepCopy(obj[i]);
                } else {
                    newObj[i] = obj[i];
                }
            }
        }
        return newObj;
    }
    
</script>

</html>

### ES6中的类

- 类的写法

class Person{
  height="178cm";
constructor(name,age){
//属性
this.name = name;
this.age = age;
}
//方法
getName(){
console.log("姓名是:"+this.name);
}
}
let student = new Person("张三",20);
student.getName();

- 静态方法和属性:实例不会继承的属性和方法

class Person{
　　//静态方法
　　static hobby(){
　　console.log("喜欢篮球");
　　}
}
//静态属性
Person.height = "178cm";
//通过类来调用
Person.hobby();
console.log(Person.height);

### 类的继承:extends

class Dad{
name = "张三";
age = 40;
constructor(height){
this.height = height;
}
hobby(){
console.log("喜欢篮球");
}
}
class Son extends Dad{
constructor(height){
//表示父类的构造函数
super(height);
}
}
let son1 = new Son("178cm");
son1.hobby();
console.log(son1.height);

### 包装对象

- 除过null,undefined，基本类型都有自己对应的包装对象：String Number Boolean

- 包装对象把所有的属性和方法给了基本类型，然后包装对象消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
//包装对象实现原理  下方义String对象举例
let str = "a b c";
function mysplit(str,method,arg){
    // 系统自动做的；
    let temp = new String(str);
    return temp[method](arg);
}
let res = mysplit(str,"split"," ");
// 销毁包装对象；
console.log(res);

</script>
</html>