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 作用域链
当一个作用域 使用某个变量时，先从本作用域中找， 如果没有去父作用域，再没有，父作用域的父作用域，一直到 全局作用域。 构成了一个作用域链
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作用域</title>
</head>
<body>
<h1>作用域</h1>
<hr>
<!-- 外部导入的也是全局变量 -->
<script src="script.js"></script>
<script>
//全局作用域
var username = '小丽丽'; function demo() {
//局部作用域
var age = 100; console.log(age); //局部变量
console.log(username); //实用全局作用域的变量 (全局变量)
// var useranme = "大哈哈" username输出是undefined username = '小哈哈'; //不加var声明直接修改 全局变量
}
console.log(username);//小丽丽 输出全局变量，注意是否全局变量被修改 demo(); //函数调用 必须要调用才能有输出 console.log(username);//输出全局变量，注意是否全局变量被修改 console.log(address)
</script> <script>
console.log(username)
</script>
</body>
</html>
作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量提升</title>
</head>
<body> <script>
// 不仅函数可以提升，变量也可以提升
console.log(age); //不会报错。 输出undefined 变量提升 var age = 1000;
console.log(age); //变量提升的变形
var user = '小丽丽';
// 存在变量提升，在局部变量未定义的情况下，本应该找全局变量，但是他还是显示undefined。函数内部改变全局变量，输出还会去找前面的全局变量。注释掉变量申明，还是会去找前面的全局变量。 function demo() { console.log(user); //undefined 变量提升
var user = '大丽丽'; //声明局部变量 user
} demo();
</script>
</body>
</html>
变量提升
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作用域链</title>
</head>
<body>
<h1>同志交友</h1>
<hr> <script>
var age = 10; //全局 哪都能用 //demo在全局作用域中
function demo() { //再次声明age
var age = 100; //嵌套函数
function fn() { var age = 1000; //再嵌套函数
function my() { console.log(age) var age = 10000;
var address = '上海'; //在my函数的作用域中
} my(); //调用函数
// 会报错，找不到作用域
console.log(address); //fn函数的作用域
} fn(); } demo(); </script>
</body>
</html>
作用域链
1.4 闭包
通常需要 函数中 返回一个 函数
目的 把一个局部作用域的 数据 让外层的作用域使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>闭包</title>
</head>
<body>
<script>
function demo () {
function fn() {
//这个作用域的 值
// 通过闭包的形式， 让外层作用域 可以使用
return 100;
}
return fn;
} console.log(demo()())
</script>
</body>
</html>
闭包
1.5 ES6 新增一 块状作用域
let关键字也可以声明变量，同var一样但是
let关键字声明的变量，会在结构语句中产生 块状作用域ES6建议 使用let代替 var
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块状作用域</title>
</head>
<body>
<script>
for (var i = 1; i <= 10; i ++) {
console.log(i);
} console.log(''); console.log(i); // i 在全局作用域 console.log(''); for (let a = 1; a <= 3; a ++) {
console.log(a);
}
console.log('');
//console.log(a); //报错 a不是全局变量 let 定义的a在块状作用域 console.log(''); let username = '小丽丽'; //全局作用域
function demo() {
// console.log(age);age is not defined
let age = 100; //局部作用域
// console.log(age)
}
// console.log(age); 报错 age未定义 demo(); //所有的 结构语句 for while do while if switch 都有块状作用域
if (true) {
let b = 1000;
console.log(b)
} //console.log(b)
</script>
</body>
</html>
块状作用域
2. JS对象
2.1 构造函数和对象
构造就是类
function User([参数]) {
this.属性 = 值;
this.属性 = 值;
this.方法 = function(){
}
}
#实例一个对象
new 构造函数();
如果构造函数没有参数 可以 不加()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类和对象</title>
</head>
<body>
<h1>类(构造函数)和对象</h1>
<hr> <script>
//构造函数 就是 类
//定义一个 构造函数 跟函数 一模一样
function User(name, age) {
//声明对象的属性
this.userName = name;
this.userAge = age; //声明一下对象 的方法
this.getInfo = function(){
console.log('姓名：'+this.userName+', 年龄：'+this.userAge+'<br>')
} } //实例化对象
var a = new User('小芳', 17);
console.log(a); //使用对象的属性
console.log(a.userName);
console.log(a.userAge); //调用对象的方法
a.getInfo(); //一个构造函数(类) 能够实例化成多个对象
var b = new User('小红', 18);
b.getInfo(); </script>
</body>
</html>
构造函数和对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>构造函数</title>
</head>
<body> <h1>系统内置的构造函数</h1>
<hr> <script>
//一切皆对象 每个对象都有与之对应的构造函数
// 所有的对象 都有一个属性 .constructor (继承来的) function User() { }
let u = new User();
// 对象u的构造函数： function User() { // }
// 字符串对象的构造函数： function String() { [native code] }
// 08-构造函数.html:24 布尔值对象的构造函数： function Boolean() { [native code] }
// 08-构造函数.html:25 数字对象的构造函数： function Number() { [native code] }
// 08-构造函数.html:26 数字对象的构造函数： function String() { [native code] } console.log('对象u的构造函数： '+u.constructor);
console.log('字符串对象的构造函数： ' + 'abc'.constructor);
console.log('布尔值对象的构造函数： ' + true.constructor);
console.log('数字对象的构造函数： ' + (12).constructor);
console.log('数字对象的构造函数： ' + ('12').constructor); </script>
</body>
</html>
查看对象构造函数
2.2 JS原型和原型链
原型
每个对象 都有原型 （原型仍然是一个对象）
对象可以继承原型的属性和方法
__proto__所有对象都有该属性， 该属性指向该对象的原型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原型</title>
</head>
<body>
<h1>同志交友</h1>
<hr> <script>
function User(){
this.name = '小丽丽';
} let u = new User(); console.log(u);
console.log(u.__proto__);
console.log(u.__proto__.__proto__);
console.log(u.__proto__.__proto__.__proto__); console.log(u.name);
console.log(u.toString); //来自原型
console.log(u.valueOf); //再定义一个对象 Object是系统内置的构造函数
var a = new Object();
// console.log(a.constructor) //object
a.__proto__ = u; console.log(a)
console.log(a.name) /*
User.prototype = 普通对象
u.__proto__
*/ //__proto__ 该属性
</script>
</body>
</html>
js原型
原型链
原型作为对象 也有原型
原型的原型的原型 就构成了 原型链
使用对象中某个属性的时候，先从对象中找，如果没有，从原型上找，原型如果也没有，继续向上找，知道顶层 （顶层的原型对象是一个 类型(类)(构造函数)是Object 的对象）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Object</title>
</head>
<body>
<script> //系统内建的构造函数 Object
var o = new Object(); //创建好对象之后，再给对象添加属性和方法
o.name = '小丽丽';
o.age = 10;
o.getInfo = function(){
console.log(this.name, this.age)
} console.log(o)
console.log(o.name)
console.log(o.age)
o.getInfo() var o1 = new Object();
//o1.__proto__ = o; console.log(o1); console.log(''); //实例化一个 Object类 的对象 简写
// python的key这里叫属性
var data = {'name':'小丽丽', age:19, address:'上海', getInfo:function(){
console.log('getInfo');
}}; //python的字典
data.grade = '11'; console.log(data.constructor);
console.log(data);
console.log(data.name);
data.getInfo(); //声明对象的时候 属性可以不加引号。 但是有些情况必须要加(属性名)
var content = {
name: '小芳',
age:100,
'user-name':'丽丽',
user_name:'大丽丽'
};
console.log(content); //调用属性
console.log(content.name)
console.log(content.user_name)
console.log(content['user-name'])
console.log(content['name']) //所有的属性 都可以通过 [] 调用
var b = 123;
console.log(b['constructor']) console.log(content["user-name"])
console.log(content[user-name])//必须加引号 否则中间-会被认为是减号 </script>
</body>
</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选择器) 返回所有满足条件元素组成的 类数组对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取页面元素</title>
</head>
<body>
<h1>同志交友</h1>
<hr> <ul class="news-list">
<li><a href="#">Lorem ipsum dolor sit amet.</a></li>
<li><a href="#">Lorem ipsum dolor sit amet.</a></li>
<li><a href="#">Lorem ipsum dolor sit amet.</a></li>
<li><a href="#">Lorem ipsum dolor sit amet.</a></li>
<li><a href="#">Lorem ipsum dolor sit amet.</a></li>
</ul> <div id="box"></div> <script>
//使用js 获取页面中元素对象
var boxEle = document.querySelector('#box');
console.dir(boxEle); var li = document.querySelector('.news-list li');
console.log(li);
li.innerHTML = '哈哈哈，我是第一个'; //获取所有的li元素 返回一个类数组对象 类数组对象的每个成员才是元素对象
var lis = document.querySelectorAll('.news-list li');
//console.log(lis);
//改变所有 li 元素的内的 内容
for (var i = 0; i < lis.length; i ++) {
lis[i].innerHTML = '哈哈哈'+i;
} </script>
</body>
</html>
从页面中获取元素
3.2 给元素绑定事件
先获取元素
ele.onclick = function(){
}
获取元素的类数组对象， 遍历，挨个给每个元素绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>给元素绑定事件</title>
<style>
.list {
list-style: none;
padding: 0;
margin: 0;
width: 600px;
}
.list li {
padding:10px;
margin:5px 0px;
border: 1px solid #ccc;
}
#btn {
border:1px solid #ccc;
padding:10px 20px;
background: #f5f5f5;
}
</style>
</head>
<body>
<h1>同志交友</h1>
<hr>
<button id="btn">点我</button>
<ul class="list">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul> <script>
//要给btn绑定元素
var btn = document.querySelector('#btn');
//绑定事件
btn.onclick = function(){
this.innerHTML = '好疼';
} //给每个 li元素都绑定事件
var lis = document.querySelectorAll('.list li');
//遍历，给每个元素绑定事件
for (var i = 0; i < lis.length; i ++) {
lis[i].onclick = function(){
//this表示 目前点的这个元素
// this.innerHTML = '我被点了';
lis[i].innerHTML = '我被点了';
//console.log(i)
}
} </script>
</body>
</html>
给元素绑定事件
3.3 修改元素的CSS样式
ele.style.css属性名
ele.style.background
ele.style.border
ele.style.backgroundColor
ele.style['background-color']
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>给元素绑定事件</title>
<style>
.list {
list-style: none;
padding: 0;
margin: 0;
width: 600px;
}
.list li {
padding:10px;
margin:5px 0px;
border: 1px solid #ccc;
}
#btn {
border:1px solid #ccc;
padding:10px 20px;
background: #f5f5f5;
}
</style>
</head>
<body>
<h1 >同志交友</h1>
<hr>
<button id="btn" style="padding:10px">点我</button>
<ul class="list">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul> <script>
//获取所有li的集合
var lis = document.querySelectorAll('.list li'); //遍历 给每个li 绑定单击事件
for (var i = 0; i < lis.length; i ++) {
lis[i].onclick = function(){
//this.style.border = '1px solid red';
//this.style['border-color'] = 'red';
this.style.borderColor = 'orange'; //所有带-的css属性 映射 为 小驼峰命名法
this.style.background = '#ccc';
}
} //获取元素的css 属性值
var btn = document.querySelector("#btn");
console.log(btn.style.padding)
</script>
</body>
</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秒）
js作用域及对象以及一些常用技巧的更多相关文章
- JS内置对象-Array之常用API
- oracle存储过程常用技巧
我们在进行pl/sql编程时打交道最多的就是存储过程了.存储过程的结构是非常的简单的,我们在这里除了学习存储过程的基本结构外,还会学习编写存储过程时相关的一些实用的知识.如:游标的处理,异常的处理,集 ...
- js作用域对象与运用技巧
1. JS作用域 1.1 全局作用域和局部作用域 函数外面声明的就是 全局作用域 函数内是局部作用域 全局变量可以直接在函数内修改和使用 变量,使用var是声明,没有var是使用变量. 如果在函数内使 ...
- JS~~~ 前端开发一些常用技巧 模块化结构 &&&&& 命名空间处理 奇技淫巧！！！！！！
前端开发一些常用技巧 模块化结构 &&&&& 命名空间处理 奇技淫巧!!!!!!2016-09-29 17 ...
- JavaScript函数作用域与对象以及实用技巧
1. JS作用域 1.1 全局作用域和局部作用域 函数外面声明的就是 全局作用域 函数内是局部作用域 全局变量可以直接在函数内修改和使用 变量,使用var是声明,没有var是使用变量. 如果在函数内使 ...
- Js常用技巧
摘录:http://crasywind.blog.163.com/blog/static/7820316920091011643149/ js 常用技巧 1. on contextmenu=" ...
- js进阶-9-3/4 form对象有哪些常用属性
js进阶-9-3/4 form对象有哪些常用属性 一.总结 一句话总结: 1.一般html标签有哪些常用属性:name id value 2.form对象有哪些常用属性(特有):action meth ...
- #9.6课堂JS总结#变量作用域 date()对象 math()对象
一.变量的作用域 1.JavaScript的作用域链 首先看下下面这段代码: <script type="text/javascript"> var rain = 1; ...
- js内置对象的常用属性和方法（Array | String | Date | Math）
js内置对象:Array String Math Date <!DOCTYPE html> <html lang="en"> <head> ...
随机推荐
- 【CQ18高一暑假前挑战赛5】标程
[A:暴力] #include<bits/stdc++.h> using namespace std; ; int a[maxn],vis[maxn],N,M; int main() { ...
- 动态规划专题（一） HDU1087 最长公共子序列
Super Jumping! Jumping! Jumping! 首先对于动态规划问题要找出其子问题,如果找的子问题是前n个序列的最长上升子序列,但这样的子问题不好,因为它不具备无后效性,因为它的第n ...
- js数组，在遍历中删除元素（用 for (var i in arr)是无效的 ）
/** * 有效的方式 - 改变下标,控制遍历 */ for (var i = 0; i < arr.length; i++) { if (...) { arr.splice(i, 1); // ...
- Android开发--数据存储之File文件存储
转载来自:http://blog.csdn.net/ahuier/article/details/10364757,并进行扩充 引言:Android开发中的数据存储方式 Android提供了5种方式存 ...
- hue集成各种组件
一.Hue安装 可以编译安装,我这里有已经编译好的,直接解压使用: hue默认端口:8888 http://gethue.com/ https://github.com/cloudera/hue ht ...
- python数据分析笔记中panda(2)
1 将手机号码分开为运营商,地区和号码段 from pandas import read_csv; df = read_csv("H:\\pythonCode\\4.6\\data.csv& ...
- 07.oAuth2介绍
07.oAuth2介绍 微信可以任意的去添加客户端,第三方的客户端,.去生成key和secret.你就自动成为他的第三方可以,去调用微信的api 简书的第三方登陆 点击微博,这里用到OAuth里面最严 ...
- 洛谷 - P2281 - 多项式的加法和乘法 - 大模拟
题目链接:https://www.luogu.org/problemnew/show/P2281 题目的意思很简单,输入两个系数.指数都是整数,变量都是大写字母的多项式,求他们的加法结果和乘法结果. ...
- [Xcode 实际操作]九、实用进阶-(16)给图片添加水印效果
目录:[Swift]Xcode实际操作 本文将演示如何截取屏幕画面,并将截取图片,存入系统相册. 在项目文件夹[DemoApp]上点击鼠标右键 ->[New File]创建一个扩展文件-> ...
- Kera高层API
目录 Keras != tf.keras Outline1 Metrics Step1.Build a meter Step2.Update data Step3.Get Average data C ...