前言
我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣带你进入前端巅峰交流群 今天继续对前端知识的小结
前端this指向问题解决方案bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端this指向问题普通函数</title>
</head>
<body>
<script>
//口诀 谁调用就会指向谁 这边是普通函数 直接报错this.fang is not a function
var name="geyao"
var fangfang = {
name : "fangfang",
fang: function () {
console.log(this.name)
},
fun: function () {
setTimeout( function ()
this.fang()
}.bind(fangfang)(),100);
}
};
fangfang.fun()
</script>
</body>
</html>
前端this指向问题解决方案call
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端this指向问题普通函数</title>
</head>
<body>
<script>
//口诀 谁调用就会指向谁 这边是普通函数 直接报错this.fang is not a function
var name="geyao"
var fangfang = {
name : "fangfang",
fang: function () {
console.log(this.name)
},
fun: function () {
setTimeout( function () {
this.fang()
}.call(this,fangfang),100);
}
};
fangfang.fun()
</script>
</body>
</html>
前端this指向问题解决方案this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端this指向问题普通函数</title>
</head>
<body>
<script>
//口诀 谁调用就会指向谁 这边是普通函数 直接报错this.fang is not a function
var name="geyao"
var fangfang = {
name : "fangfang",
fang: function () {
console.log(this.name)
},
fun: function () {
_this=this
setTimeout( function () {
_this.fang()
},100);
}
};
fangfang.fun()
</script>
</body>
</html>
前端this指向问题解决方案箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端this指向问题普通函数</title>
</head>
<body>
<script>
//口诀 谁调用就会指向谁 这边是普通函数 直接报错this.fang is not a function
var name = "geyao"
var fangfang = {
name: "fangfang",
fang: function () {
console.log(this.name)
},
fun: function () {
setTimeout(() => {
this.fang()
}, 100);
}
};
fangfang.fun()
</script>
</body>
</html>
前端原型和原型链
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端原型和原型链</title>
</head>
<body>
<script>
//构造函数
// 实例成员： 实例成员就是在构造函数内部，通过this添加的成员。实例成员只能通过实例化的对象来访问。
// 静态成员： 在构造函数本身上添加的成员，只能通过构造函数来访问
function Animai(name, age) {
this.name = name
this.age = age
}
Animai.length = '2m'
let dog = new Animai('小狗', '4')
console.log(dog, 'dog')
//Animai {name: '小狗', age: '4'} 'dog'
let cat = new Animai('小猫', '5')
console.log(cat, 'cat')
//Animai {name: '小猫', age: '5'}
console.log(dog.length, 'length')
console.log(Animai.length, 'length')
//undefined 'length'
// Animai 2
</script>
</body>
</html>
前端基本数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端基本数据类型</title>
</head>
<body>
<script>
function test(){
console.log(1)
}
console.log(test,"test")
</script>
</body>
</html>
设计模式单体模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单体模式</title>
</head>
<body>
<script>
// 单体模式 只能实例化一次 每次返回的实例是同一对象
var Singleton = function (name) {
this.name = name;
};
Singleton.prototype.getName = function () {
return this.name;
}
// 获取实例对象
var getInstance = (function () {
var instance = null;
return function (name) {
console.log(name,"name")
//如果实例不存在 重新新加个实例
if (!instance) {
instance = new Singleton(name);
}
return instance;
}
})();
// 测试单体模式的实例
var a = getInstance("aa");
var b = getInstance("bb");
console.log(a,"a") //aa
console.log(b,"b") //aa
</script>
</body>
</html>
总结
我是歌谣 最好的种树是十年前 其次是现在 加油 歌谣
