前端常用的库和实用技术之JavaScript高级技巧
Posted smart-girl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端常用的库和实用技术之JavaScript高级技巧相关的知识，希望对你有一定的参考价值。
javascript高级技巧
变量作用域和闭包
<!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>
<script>
// js是函数级作用域，在内部的变量内部都能访问，外部不能访问内部的，内部能访问外部的
test();
var j;
j = 1000;
function test()
if(false)
var i=10;
else
var t =100;
console.log('bbb',t);
console.log('cccc',j);
alert('....',t);
</script>
<script>
var j = 100;
~(function test()
console.log(j);
)();
//100
//-1
</script>
<script>
var j =100;
function test()
var j;
alert(j);//拿不到外面的J，里面的j值，war在前面
j=10
//执行test()根本取不到
test()
</script>
<script>
//闭包：闭包就是拿到本不属于它的东西
var j = 100;
function test()
var j;
j = 10;
var k = 666;
return function()
return k;
alert(j);
var t = test()();
alert(t);
</script>
</body>
</html>this指针的使用
<!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>
<script>
// window.m = 100;
// // this指针的使用
// function test()
// alert(this.m);
//
// window.test();
this.m = 1000;
var obj =
m:100,
test:function()
alert(this.m);
return function()
alert(this.m);//
// 谁调指向谁
var t = obj.test()
window.t();
//上面等同于
// (obj.test()) ();
</script>
</body>
</html><script>
this.a = 1000;
function test()
this.a = 1;
test.prototype.geta = function()
return this.a;
var p = new test;
console.log(p.geta);
</script>
<script>
function test()
this.a = 1;
test.prototype.a = 100;
var p = new test;
console.log(p);
</script><!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>
<input type="button" id="test" value="test" style="color:red;">
<script>
var style =
color:"green"
window.test();
document.getElementById("test").click = test;
function test()
alert(this.style.color);
</script>
</body>
</html>按值传递和按引用传递
<!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>
<script>
function test(num)
//这里对num 创建了一个内存的副本
var num = num+1;
return num;
var num = 1;
alert(test(num));
alert(num);
</script>
<script>
function test(obj)
obj.age = "20"
console.log('内部obj',obj);
var obj =
name:'xiaoming'
test(obj);
console.log('外部的..',obj);
</script>
</body>
</html>by上面的例子其实不够经典也不够高级
本文看自前端常用的库和实用技术之JavaScript按值传递和按引用传递
以上是关于前端常用的库和实用技术之JavaScript高级技巧的主要内容，如果未能解决你的问题，请参考以下文章