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编辑  收藏  举报