JS-面向对象

JS笔记

---

创建对象

function info(name, age, sex) {
	var obj = new Object();
	obj.name = name;
	obj.age = age;
	obj.sex = sex;
	obj.showName = function () {
  		alert(this.name);
	};
	obj.showAge = function () {
  		alert(this.age);
	};
	return obj;
}
/*
	1.没有new
	2.每一个新创建出来的对象独有一套函数
*/
var a = info("falcon", 18, "女");
a.showName();//falcon
a.showAge();//18

//带new。这种通过new调用的函数，我们把它叫做构造函数，构造函数可以构造对象，一般情况下首字母大写
function info(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
  this.showName = function () {
    alert(this.name);
  };
  this.showAge = function () {
    alert(this.age);
  };
}
var a = new info("falcon", 18, "女");
a.showName(); //falcon
a.showAge();//18

---

prototype原型（封装，封装构造函数）

如果我们将方法添加到构造函数的原型prototype对象上，构造函数构造出来的对象共享原型上所有的方法

/* 
  prototype 原型对象
  概念；每一个函数上，都有一个原型对象prototype
 */
var arr1 = [10, 20, 30, 40, 50];
var arr2 = [1, 2, 3, 4, 5];
Array.prototype.sum = function () {
  var res = 0;
  for (var i = 0; i < this.length; i++) {
    res += this[i];
  }
  return res;
};
alert(arr1.sum());//150
alert(arr2.sum());//15
alert(arr1.sum == arr2.sum);//true

function Info(name, sex) {
  this.name = name;
  this.sex = sex;
}
Info.prototype.showName = function () {
  alert(this.name);
};
Info.prototype.showSex = function () {
  alert(this.sex);
};
var a = new Info("falcon", "女");
a.showName();//falcon
a.showSex();//女

---

继承

/* 
  继承：侧重是从父一级构造函数，继承到的属性和方法。
  多态：侧重是，子一级，自己重写和新增的属性和方法。
*/
function Info({ name, age, sex }) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}
Info.prototype = {
  showName: function () {
    alert(this.name);
  },
  showAge: function () {
    alert(this.age);
  },
  showSex: function () {
    alert(this.sex);
  },
};
function Stu({ name, age, sex, id }) {
  //1.继承父一级构造函数所有的属性
  Info.call(this, {
    name: name,
    age: age,
    sex: sex,
  });
  //添加自己的属性
  this.id = id;
}

for (var funcName in Info.prototype) {
  Stu.prototype[funcName] = Info.prototype[funcName];
}
var demo1 = new Stu({
  name: "falcon",
  age: 18,
  sex: "女",
  id: 20200506,
});
/* alert(demo1.name); //falcon
alert(demo1.sex); //女
alert(demo1.age); //18
alert(demo1.id); //20200506 */
demo1.showName(); //falcon
demo1.showSex(); //女

/* var obj1 = {
  a: 10,
  b: 20,
  c: 30,
};
var obj2 = obj1;
obj2.a = 40;
alert(obj1.a);//40
alert(obj2.a);//40 */

var obj1 = {
  a: 10,
  b: 20,
  c: 30,
};

var obj2 = {};
for (var attr in obj1) {
  obj2[attr] = obj1[attr];
}

obj2.c = 100;
alert(obj1);//10,20,30
alert(obj2);//10,20,100

---

原型的理解

构造函数构造出来的对象，有一个属性_proto_，指向构造出这个对象的构造函数的原型
instanceof关键字
功能：判断某一个对象是否是这个构造函数构造出来的

//原型理解：prototype、__proto__、instanceof
function info({ name, age, sex }) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}
info.prototype = {
  showName: function () {
    alert(this.name);
  },
  showAge: function () {
    alert(this.age);
  },
  showSex: function () {
    alert(this.sex);
  },
};
var demo1 = new info({
  name: "falcon",
  age: 18,
  sex: "女",
});

var demo2 = new info({
  name: "alice",
  age: 16,
  sex: "男",
});

alert(demo1.__proto__ == info.prototype); //true
alert(demo1.__proto__ == demo2.__proto__); //true
alert(demo1 instanceof info); //true

---

ECMA6的class语法

//传统方法
function info(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}
info.prototype.showSelf = function () {
  alert(`name:${this.name},age:${this.age},sex:${this.sex}`);
};
function message(name, age, sex, job) {
  //1.构造函数的伪装——继承父级的属性
  info.call(this, name, age, sex);
  this.job = job;
}
//2.原型链——继承父一级的方法
//<1>通过for...in遍历
for (var funcName in info.prototype) {
  message.prototype[funcName] = info.prototype[funcName];
}
//<2>Object.create()
message.prototype = Object.create(info.prototype);
//<3>通过调用构造函数继承
message.prototype = new info();

message.prototype.showJob = function () {
  alert(`Job:${this.job}`);
};
var b = new message("lily", 21, "女", "程序员");
b.showJob(); //程序员
b.showSelf();//name:lily,age:21,sex:女


//ECMA6的class语法
class info {
  constructor(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
  }
  showSelf() {
    alert(`name:${this.name},age:${this.age},sex:${this.sex}`);
  }
}
var a = new info("falcon", 18, "女");
// a.showSelf(); //name:falcon,age:18,sex:女

//extends 继承
class message extends info {
  constructor(name, age, sex, job) {
    //1.继承父一级的属性
    super(name, age, sex);
    this.job = job;
  }
  showJob() {
    alert(`job:${this.job}`);
  }
}
var c = new message("Bob", 23, "男", "java开发工程师");
c.showSelf(); //name:Bob,age:23,sex:男
c.showJob(); //job:java开发工程师

---

拖拽

面向过程 ==> 面向对象
1.window.onload => 构造函数
2.全局变量 => 构造函数的属性
3. 全局函数 => 构造函数的方法

//拖拽
window.onload = function(){
   var oDiv = document.getElementById("div1");
    oDiv.onmousedown = function(ev){
        var e = ev || window.event;
        // alert(e.offsetX + ", " + e.offsetY);
        var offsetX = e.clientX - oDiv.offsetLeft;
        var offsetY = e.clientY - oDiv.offsetTop;

        document.onmousemove = function(ev){
            var e = ev || window.event;
            oDiv.style.left = e.clientX - offsetX + 'px';
            oDiv.style.top = e.clientY - offsetY + 'px';
        }
    }

    document.onmouseup = function(){
        document.onmousemove = null;
    }
}

//拖拽，面向对象
function Drag(id) {
  this.oDiv = document.getElementById(id);
  var _this = this;
  this.oDiv.onmousedown = funcDown(ev){
    _this.funcDown(ev);
  };
  document.onmouseup = this.funcUp;

  Drag.prototype.funcDown = function (ev) {
    var e = ev || window.event;
    this.offsetX = e.clientX - this.oDiv.offsetLeft;
    this.offsetY = e.clientY - this.oDiv.offsetTop;

    var _this = this;
    document.onmousemove = funcDown(ev){
      _this.funcMove(ev);
    };
  };
  Drag.prototype.funcMove = function (ev) {
    var e = ev || window.event;
    this.oDiv.style.left = e.clientX - this.offsetX + "px";
    this.oDiv.style.top = e.clientY - this.offsetY + "px";
  };
  Drag.prototype.funcUp = function () {
    document.onmousemove = null;
  };
}
window.onload = function () {
  new Drag("div1");
};