<!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>面向对象与this指向</title>
</head>
<body>
<script>
var obj = { name: "jieke" };
var timeout = setTimeout(function () {
obj = Object.assign(obj, { age: 20 });
console.log(obj);
console.log(this);
clearTimeout(timeout);
}, 2000);
console.log(obj);
</script>
<script>
var obj = {
startActon() {
// debugger;
this.property = {
name: "jieke",
age: 20
};
this.callSetTimeout();
},
callSetTimeout() {
// debugger;
var timeout = 1000;
// 箭头函数没有自己的作用域
this.timeout = setTimeout(() => {
debugger;
console.log(this.property);
}, timeout);
// 使用bind函数传递this
// this.timeout = setTimeout(function () {
// console.log(this.property);
// }.bind(this), timeout);
// 使用自定义变量传递this
// var that = this;
// this.timeout = setTimeout(function () {
// console.log(that.property);
// }, timeout);
},
endAction() {
// debugger;
console.log(this.property);
clearTimeout(this.timeout);
}
};
obj.startActon();
var interval = setInterval(() => {
debugger;
obj.endAction();
clearInterval(interval);
}, 2000);
</script>
<script>
// 构造函数，约定首字母大写，普通函数首字母小写
// 如果直接使用，相当于普通函数，this指向windows对象
// 如果使用 new 创建一个新的对象，则this指向这个新创建的对象
// 属性放在函数内部，方法放在原型上，new 时对象只会占用属性的空间，不会占用方法的空间
function ConstructionFunc(obj) {
var initObj = {
name: "jieke",
age: 20
};
this.property = Object.assign({}, initObj, obj);
}
ConstructionFunc.prototype = {
startActon: function () {
// debugger;
this.callSetTimeout();
},
callSetTimeout: function () {
// debugger;
var timeout = 1000;
// 箭头函数没有自己的作用域
this.timeout = setTimeout(() => {
debugger;
console.log(this.property);
}, timeout);
// 使用bind函数传递this
// this.timeout = setTimeout(function () {
// console.log(this.property);
// }.bind(this), timeout);
// 使用自定义变量传递this
// var that = this;
// this.timeout = setTimeout(function () {
// console.log(that.property);
// }, timeout);
},
endAction: function () {
// debugger;
console.log(this.property);
clearTimeout(this.timeout);
}
}
var obj = new ConstructionFunc({ sex: "man" });
obj.startActon();
var interval = setInterval(() => {
debugger;
obj.endAction();
clearInterval(interval);
}, 2000);
</script>
</body>
</html>
网友评论