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");
};