js作用域及对象以及一些常用技巧

回顾

流程控制（语句）

分支

if () {
    
}

if () {
    
} else {
    
}

if () {
    
} else if () {
    
} else if () {
    
} else {
    
}


switch () {
    case break;
    case break;
    default: 
}

循环

while () {
    
}

do {
    
} while()

#适合遍历 指定次数循环
for (var i = 0; 循环条件; 循环变化) {
    
}

其他语句

continue
break
return

try {
    
} catch () {
    
} finally {
    
}

'use strict'

函数

定义方式

function 函数名(参数) {
    
}

var 函数名 = function(参数){
    
}

参数

形参和实参
参数的默认值 demo('utf-8')
可变长参数 arguments

返回值

回调函数

自调函数

(function(){
    
})()
#作用域

笔记

1. JS作用域

1.1 全局作用域和局部作用域

函数外面声明的就是全局作用域
函数内是局部作用域
全局变量可以直接在函数内修改和使用
变量，使用var是声明，没有var是使用变量。如果在函数内使用var来声明变量，在函数内会覆盖同名的全局变量

1.2 变量提升

在变量声明之前去使用变量会得到 undefined ，而不是报错
函数内，如果声明了跟全局变量同名的局部变量，在声明之前使用改变量，得到undefined( 该变量已经是局部的啦)

1.3 作用域链

当一个作用域使用某个变量时，先从本作用域中找，如果没有去父作用域，再没有，父作用域的父作用域，一直到全局作用域。构成了一个作用域链

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>作用域</title>
 6 </head>
 7 <body>
 8     <h1>作用域</h1>
 9     <hr>
10     <!-- 外部导入的也是全局变量 -->
11     <script src="script.js"></script> 
12     <script>
13         //全局作用域
14         var username = '小丽丽';
15 
16 
17         function demo() {
18             //局部作用域
19             var age = 100;
20         
21             console.log(age); //局部变量
22             console.log(username); //实用全局作用域的变量 (全局变量)
23             // var useranme = "大哈哈" username输出是undefined
24         
25              username = '小哈哈';  //不加var声明直接修改 全局变量
26         }
27         console.log(username);//小丽丽 输出全局变量，注意是否全局变量被修改
28 
29         demo(); //函数调用 必须要调用才能有输出
30 
31         console.log(username);//输出全局变量，注意是否全局变量被修改
32 
33         console.log(address)
34     </script>
35 
36 
37     <script>
38         console.log(username)
39     </script>
40 </body>
41 </html>

作用域

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>变量提升</title>
 6 </head>
 7 <body>
 8     
 9 
10     <script>
11         // 不仅函数可以提升，变量也可以提升
12         console.log(age); //不会报错。 输出undefined  变量提升
13 
14         var age = 1000;
15         console.log(age);
16 
17 
18 
19         //变量提升的变形
20         var user = '小丽丽';
21         // 存在变量提升，在局部变量未定义的情况下，本应该找全局变量，但是他还是显示undefined。函数内部改变全局变量，输出还会去找前面的全局变量。注释掉变量申明，还是会去找前面的全局变量。
22 
23         function demo() {
24 
25             console.log(user); //undefined  变量提升
26             var user = '大丽丽'; //声明局部变量 user
27         }
28 
29         demo();
30     </script>
31 </body>
32 </html>

变量提升

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>作用域链</title>
 6 </head>
 7 <body>
 8     <h1>同志交友</h1>
 9     <hr>
10 
11 
12     <script>
13         var age = 10; //全局  哪都能用
14 
15         
16         //demo在全局作用域中
17         function demo() {
18 
19             //再次声明age
20             var age = 100;
21 
22             //嵌套函数
23             function fn() {
24 
25                 var age = 1000;
26 
27                 //再嵌套函数
28                 function my() {
29 
30 
31                     console.log(age)
32 
33                     var age = 10000;
34                     var address = '上海'; //在my函数的作用域中
35                 }
36 
37                 my(); //调用函数
38                 // 会报错，找不到作用域
39                 console.log(address); //fn函数的作用域
40             }
41 
42             fn();
43 
44         }
45 
46 
47         demo();
48 
49 
50 
51 
52 
53     </script>
54 </body>
55 </html>

作用域链

1.4 闭包

通常需要函数中返回一个函数
目的把一个局部作用域的数据让外层的作用域使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>闭包</title>
 6 </head>
 7 <body>
 8     <script>
 9         function demo () {
10             function fn() {
11                 //这个作用域的 值
12                 // 通过闭包的形式， 让外层作用域 可以使用
13                 return 100;
14             }
15             return fn;
16         }
17 
18 
19         console.log(demo()())
20     </script>
21 </body>
22 </html>

闭包

1.5 ES6 新增一块状作用域

let关键字也可以声明变量，同var一样
但是let关键字声明的变量，会在结构语句中产生块状作用域
ES6建议使用let代替 var

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>块状作用域</title>
 6 </head>
 7 <body>
 8     <script>
 9         for (var i = 1; i <= 10; i ++) {
10             console.log(i);
11         }
12 
13         console.log('');
14 
15         console.log(i); // i 在全局作用域
16 
17         console.log('');
18 
19 
20         for (let a = 1; a <= 3; a ++) {
21             console.log(a);
22         }
23         console.log('');
24         //console.log(a);  //报错  a不是全局变量 let 定义的a在块状作用域
25 
26         console.log('');
27 
28         let username = '小丽丽'; //全局作用域
29         function demo() {
30             // console.log(age);age is not defined
31             let age = 100; //局部作用域
32             // console.log(age)
33         }
34         // console.log(age); 报错 age未定义
35 
36         demo();
37 
38 
39         //所有的 结构语句  for while do while  if switch  都有块状作用域
40         if (true) {
41             let b = 1000;
42             console.log(b)
43         }
44 
45         //console.log(b)
46     </script>
47 </body>
48 </html>

块状作用域

2. JS对象

2.1 构造函数和对象

构造就是类
function User([参数]) {
    this.属性 = 值;
    this.属性 = 值;
    
    this.方法 = function(){
        
    }
}

#实例一个对象
new 构造函数();
如果构造函数没有参数 可以 不加()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>类和对象</title>
 6 </head>
 7 <body>
 8     <h1>类(构造函数)和对象</h1>
 9     <hr>
10 
11     <script>
12         //构造函数 就是 类
13         //定义一个 构造函数 跟函数 一模一样
14         function User(name, age) {
15             //声明对象的属性
16             this.userName = name;
17             this.userAge = age;
18 
19             //声明一下对象 的方法
20             this.getInfo = function(){
21                 console.log('姓名：'+this.userName+', 年龄：'+this.userAge+'<br>')
22             }
23 
24         }
25 
26 
27         //实例化对象
28         var a = new User('小芳', 17);
29         console.log(a);
30 
31         //使用对象的属性
32         console.log(a.userName);
33         console.log(a.userAge);
34 
35         //调用对象的方法
36         a.getInfo();
37 
38 
39         //一个构造函数(类) 能够实例化成多个对象
40         var b = new User('小红', 18);
41         b.getInfo();
42 
43 
44     </script>
45 </body>
46 </html>

构造函数和对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>构造函数</title>
 6 </head>
 7 <body>
 8     
 9     <h1>系统内置的构造函数</h1>
10     <hr>
11 
12     <script>
13         //一切皆对象  每个对象都有与之对应的构造函数
14         // 所有的对象 都有一个属性 .constructor   (继承来的)
15         
16         function User() {
17 
18         }
19         let u = new User();
20         // 对象u的构造函数： function User() {
21 
22         // }
23         //         字符串对象的构造函数： function String() { [native code] }
24         // 08-构造函数.html:24 布尔值对象的构造函数： function Boolean() { [native code] }
25         // 08-构造函数.html:25 数字对象的构造函数： function Number() { [native code] }
26         // 08-构造函数.html:26 数字对象的构造函数： function String() { [native code] }
27 
28         console.log('对象u的构造函数： '+u.constructor);
29         console.log('字符串对象的构造函数： ' + 'abc'.constructor);
30         console.log('布尔值对象的构造函数： ' + true.constructor);
31         console.log('数字对象的构造函数： ' + (12).constructor);
32         console.log('数字对象的构造函数： ' + ('12').constructor);
33 
34 
35     </script>
36 </body>
37 </html>

查看对象构造函数

2.2 JS原型和原型链

原型

每个对象都有原型（原型仍然是一个对象）
对象可以继承原型的属性和方法
__proto__ 所有对象都有该属性，该属性指向该对象的原型

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>原型</title>
 6 </head>
 7 <body>
 8     <h1>同志交友</h1>
 9     <hr>
10 
11     <script>
12         function User(){
13             this.name = '小丽丽';
14         }
15 
16         let u = new User();
17 
18 
19         console.log(u);
20         console.log(u.__proto__);
21         console.log(u.__proto__.__proto__);
22         console.log(u.__proto__.__proto__.__proto__);
23 
24 
25         console.log(u.name);
26         console.log(u.toString); //来自原型
27         console.log(u.valueOf);
28 
29 
30         //再定义一个对象 Object是系统内置的构造函数
31         var a = new Object();
32         // console.log(a.constructor)  //object
33         a.__proto__ = u;
34 
35         console.log(a)
36         console.log(a.name)
37 
38 
39         /*
40             User.prototype = 普通对象
41             u.__proto__
42         */
43 
44 
45 
46 
47         //__proto__ 该属性 
48     </script>
49 </body>
50 </html>

js原型

原型链

原型作为对象也有原型
原型的原型的原型就构成了原型链
使用对象中某个属性的时候，先从对象中找，如果没有，从原型上找，原型如果也没有，继续向上找，知道顶层（顶层的原型对象是一个类型(类)(构造函数)是Object 的对象）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Object</title>
 6 </head>
 7 <body>
 8     <script>
 9         
10         //系统内建的构造函数 Object
11         var o = new Object();
12 
13 
14         //创建好对象之后，再给对象添加属性和方法
15         o.name = '小丽丽';
16         o.age = 10;
17         o.getInfo = function(){
18             console.log(this.name, this.age)
19         }
20 
21         console.log(o)
22         console.log(o.name)
23         console.log(o.age)
24         o.getInfo()
25 
26 
27 
28         var o1 = new Object();
29         //o1.__proto__ = o;
30 
31         console.log(o1);
32 
33         console.log('');
34 
35 
36         //实例化一个 Object类 的对象   简写
37         // python的key这里叫属性
38         var data = {'name':'小丽丽', age:19, address:'上海', getInfo:function(){
39             console.log('getInfo');
40         }}; //python的字典
41         data.grade = '11';
42 
43         console.log(data.constructor);
44         console.log(data);
45         console.log(data.name);
46         data.getInfo();
47 
48 
49 
50         //声明对象的时候 属性可以不加引号。 但是有些情况必须要加(属性名)
51         var content = {
52             name: '小芳',
53             age:100,
54             'user-name':'丽丽',
55             user_name:'大丽丽'
56         };
57         console.log(content);
58 
59         //调用属性
60         console.log(content.name)
61         console.log(content.user_name)
62         console.log(content['user-name'])
63         console.log(content['name'])
64 
65         //所有的属性 都可以通过 [] 调用
66         var b = 123;
67         console.log(b['constructor'])
68 
69         console.log(content["user-name"])
70         console.log(content[user-name])//必须加引号 否则中间-会被认为是减号
71 
72 
73 
74 
75 
76 
77 
78     </script>
79 </body>
80 </html>

Object

2.4 JS对象属性的调用

.  点
obj.name
obj.age

[] 中括号
obj['name']
obj['age']
obj['user-name']


任意的对象 都可以在对象实例化完成后， 添加属性和方法

2.4 Object 构造函数

js内建的构造方法 叫 Object
var obj = new Object()


josn方式定义对象
var obj = {属性：值, 属性:值}   // new Object的简写
obj的构造含 是 Object

3. 实用技巧

3.1 从页面中获取元素

document.getElementById()   根据ID的值
document.getElementsByTagName()   根据标签名 
document.getElmenntsByClassName()  根据class的值
document.getElementsByName()  根据name属性的值
document.querySelector(css选择器)  返回满足条件的第一个 元素对象
document.querySelectorAll(css选择器)   返回所有满足条件元素组成的 类数组对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>获取页面元素</title>
 6 </head>
 7 <body>
 8     <h1>同志交友</h1>
 9     <hr>
10 
11     <ul class="news-list">
12         <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
13         <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
14         <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
15         <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
16         <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
17     </ul>
18 
19     <div id="box"></div>
20 
21 
22 
23     <script>
24         //使用js 获取页面中元素对象
25         var boxEle = document.querySelector('#box');
26         console.dir(boxEle);
27 
28         var li = document.querySelector('.news-list li');
29         console.log(li);
30         li.innerHTML = '哈哈哈，我是第一个';
31 
32         //获取所有的li元素 返回一个类数组对象  类数组对象的每个成员才是元素对象
33         var lis = document.querySelectorAll('.news-list li');
34         //console.log(lis);
35         //改变所有 li 元素的内的 内容
36         for (var i = 0; i < lis.length; i ++) {
37             lis[i].innerHTML = '哈哈哈'+i;
38         }
39 
40     </script>
41 </body>
42 </html>

从页面中获取元素

3.2 给元素绑定事件

先获取元素
ele.onclick = function(){
    
}

获取元素的类数组对象， 遍历，挨个给每个元素绑定事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>给元素绑定事件</title>
 6     <style>
 7         .list {
 8             list-style: none;
 9             padding: 0;
10             margin: 0;
11             width: 600px;
12         }
13         .list li {
14             padding:10px;
15             margin:5px 0px;
16             border: 1px solid #ccc;
17         }
18         #btn {
19             border:1px solid #ccc;
20             padding:10px 20px;
21             background: #f5f5f5;
22         }
23     </style>
24 </head>
25 <body>
26     <h1>同志交友</h1>
27     <hr>
28     <button id="btn">点我</button>
29     <ul class="list">
30         <li>Lorem ipsum dolor sit amet.</li>
31         <li>Lorem ipsum dolor sit amet.</li>
32         <li>Lorem ipsum dolor sit amet.</li>
33         <li>Lorem ipsum dolor sit amet.</li>
34         <li>Lorem ipsum dolor sit amet.</li>
35         <li>Lorem ipsum dolor sit amet.</li>
36         <li>Lorem ipsum dolor sit amet.</li>
37         <li>Lorem ipsum dolor sit amet.</li>
38     </ul>
39 
40 
41     <script>
42         //要给btn绑定元素
43         var btn = document.querySelector('#btn');
44         //绑定事件
45         btn.onclick = function(){
46             this.innerHTML = '好疼';
47         }
48 
49 
50         //给每个 li元素都绑定事件
51         var lis = document.querySelectorAll('.list li');
52         //遍历，给每个元素绑定事件
53         for (var i = 0; i < lis.length; i ++) {
54             lis[i].onclick = function(){
55                 //this表示 目前点的这个元素
56                 // this.innerHTML = '我被点了';
57                 lis[i].innerHTML = '我被点了';
58                 //console.log(i)
59             }
60         }
61 
62     </script>
63 </body>
64 </html>

给元素绑定事件

3.3 修改元素的CSS样式

ele.style.css属性名
ele.style.background
ele.style.border
ele.style.backgroundColor
ele.style['background-color']

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>给元素绑定事件</title>
 6     <style>
 7         .list {
 8             list-style: none;
 9             padding: 0;
10             margin: 0;
11             width: 600px;
12         }
13         .list li {
14             padding:10px;
15             margin:5px 0px;
16             border: 1px solid #ccc;
17         }
18         #btn {
19             border:1px solid #ccc;
20             padding:10px 20px;
21             background: #f5f5f5;
22         }
23     </style>
24 </head>
25 <body>
26     <h1 >同志交友</h1>
27     <hr>
28     <button id="btn" style="padding:10px">点我</button>
29     <ul class="list">
30         <li>Lorem ipsum dolor sit amet.</li>
31         <li>Lorem ipsum dolor sit amet.</li>
32         <li>Lorem ipsum dolor sit amet.</li>
33         <li>Lorem ipsum dolor sit amet.</li>
34         <li>Lorem ipsum dolor sit amet.</li>
35         <li>Lorem ipsum dolor sit amet.</li>
36         <li>Lorem ipsum dolor sit amet.</li>
37         <li>Lorem ipsum dolor sit amet.</li>
38     </ul>
39 
40 
41     <script>
42         //获取所有li的集合
43         var lis = document.querySelectorAll('.list li');
44 
45         //遍历 给每个li 绑定单击事件
46         for (var i = 0; i < lis.length; i ++) {
47             lis[i].onclick = function(){
48                 //this.style.border = '1px solid red';
49                 //this.style['border-color'] = 'red';
50                 this.style.borderColor = 'orange'; //所有带-的css属性 映射 为 小驼峰命名法
51                 this.style.background = '#ccc';
52             }
53         }
54 
55 
56         //获取元素的css 属性值
57         var btn = document.querySelector("#btn");
58         console.log(btn.style.padding)
59     </script>
60 </body>
61 </html>

修改元素css样式

3.4 设置元素的class值

ele.className 可以赋值，也可以获取
ele.classList.add(‘值’) 添加一个class值
ele.classList.remove(‘值’) 删除一个class值
ele.classList.toggle(‘值’)  自动切换一个class值(有就删除，没有就添加)

3.5 事件

onclick         单击
ondblclick      双击
oncontextmenu   右击
onmouseover/onmouseenter       鼠标悬浮到元素上
onmouseout/onmouseleave        鼠标离开元素
onmousemove   鼠标在上面移动
onmousedown   鼠标的按键按下
onmouseup     鼠标的按键抬起

3.6 JS定时

单次定时

setTimeout(fn, delay)
clearTimeout()  清除定时

多次定时

setInterval(fn, dealy)
clearInterval()  清除定时

总结

1. 作用域

2. 对象

构造函数实例化对象
对象的原型原型链

3 Object 类型

类似于python的字典
键值对

作页

进度条效果
倒计时效果（选做）（距离世界末日还有 23天1小时4分2秒）

posted @ 2018-08-12 23:21 Roc_Atlantis 阅读(701) 评论(0) 编辑收藏举报

刷新页面返回顶部

js作用域及对象以及一些常用技巧

回顾

流程控制（语句）

分支

循环

其他语句

函数

定义方式

参数

返回值

回调函数

自调函数

笔记

1. JS作用域

1.1 全局作用域和局部作用域

1.2 变量提升

1.3 作用域链

1.4 闭包

1.5 ES6 新增一 块状作用域

2. JS对象

2.1 构造函数和对象

2.2 JS原型和原型链

原型

原型链

2.4 JS对象属性的调用

2.4 Object 构造函数

3. 实用技巧

3.1 从页面中获取元素

3.2 给元素绑定事件

3.3 修改元素的CSS样式

3.4 设置元素的class值

3.5 事件

3.6 JS定时

单次定时

多次定时

总结

1. 作用域

2. 对象

3 Object 类型

作页

公告

1.5 ES6 新增一块状作用域