提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
目录
1.数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--
1. 分类
* 基本(值)类型
1.String :任意字符串
2.Number :任意的数字
3.boolean :true/flase
4.undefined :undefined
5.null :null
* 对象(引用)类型
* 1.object :任意对象都是object类型（而其他数据类型都是用来存放数据）
Function :(和其他对象相比是一个特别的对象：可以执行（存放执行代码块，实现一部分功能）)
Array : 一种特别的对象(通过数值下标来操作数组元素 ，数组作为特殊的对象是有序的【其他对象无序的】)
2.判断
* typeof
* 可以判断：undefined / 数值 / 字符串 / 布尔值 / function
*
* 特殊的笔试经常考：
* 不能判断：null 与 object object与array（typeof不能准确的判断到具体的object【array function】 只能到object）
*
* instanceof
* 判断对象的具体类型
*
* === / ==
* 可以判断：undefined null
-->
<script type="text/javascript">
//1.基本
// typeof 返回数据类型的字符串表达 : ''带引号
var a ;
console.log(a , typeof a , typeof a ==="undefined" , a===undefined);//一个a有typeof="" 没有typeof就是 a=== 都为true
//undefined = "undefined";
console.log(undefined = "undefined");//false
a = 3
console.log(typeof a ==="number");//true;
a = 'atguigu'
console.log(typeof a ==="string");//true;
a = true
console.log(typeof a ==="boolean");//true;
a = null
console.log(typeof a , a===null);// 'object' true;
console.log("-------------------");
//2.对象
var b1 = {
b2:[1,'abc',console.log],
b3:function(){
console.log('b3');
return function(){
return 'xfzhang';
}
}
}
console.log(b1 instanceof Object , b1 instanceof Array);//ture false
console.log(b1.b2 instanceof Array,b1.b2 instanceof Object);//true true
console.log(b1.b3 instanceof Function , b1.b3 instanceof Object);//true true
//面试笔试经常考
console.log(typeof b1.b2,"-------");//'object';
//typeof 返回的是有个字符串
console.log(typeof b1.b3==='function');//true
console.log(typeof b1.b2[2]==='function');//true
//b1.b2[2]; 找到console.log这个值 是一个函数
b1.b2[2](4);//调用的是console.log输出4
//到 b3
//关于函数的调用：已知是一个函数加上()就是调用
console.log(b1.b3()());//显示：xfzhang
//例子:
// var obj = {
// name:zhou,
// age:18,无序
// }
// var arr = [1,2 3,"hello"];有序
</script>
</body>
</html>
2.数据类型2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
面试官经常问的三个问题：
1.undefined与null的区别？
* undefined代表 定义但未赋值
* null定义 并赋值了，只是值为null
2.什么时候给变量赋值为null
* 初始赋值null，表明将要赋值为对象
* 结束前赋值null，让对象成为垃圾对象（被垃圾回收器回收）
3.严格区别变量的类型和数据类型？
*数据的类型
* 基本类型
* 对象类型
*变量的类型（变量内存值的类型）
* 基本的类型：保存就是基本类型的数据
* 引用的类型：保存的是地址值——通过该变量存放的地址值找到该内存中的数据，并且进行操作
-->
<script type="text/javascript">
//什么是实例？？？？
//实例：实例对象
//类型：类型对象
function Person (name,age){//构造函数 类型
this.name = name;
this.age = age;
}
var p = new Person('tom', 12);//根据类型创建的实例对象
/*
* 我们怎么来使用构造函数呢！
* 大写开头，表明这是一个构造函数
* 然后构造函数的确定是通过new一个实例的对象来说明的Persong使用构造函数
*
* p就是他的实例对象
*
*/
//这是普通函数的调法
//Person('jack',12);
//1.undefined与null的区别？
var a ;
console.log(a);//undefined
a=null;
console.log(a);//null
//2.什么时候给变量赋值为null
//从矛盾的点来说，null是基本数据类型，但是返回的缺是一个Object
//所以null值只能用来表明将要赋的值为对象，也就是说
//b是一个对象，但是值为null，还没确定性的赋值
//然后来确定对象
//起始
var b = null;
//确定对象就赋值，这里已经确定b是一个对象了，并且有了值
b = ['zhou',12];
//最后：释放内存
b = null;//让b指向的对象成为垃圾对象(被浏览器中的垃圾对象回收)
//b=2;//这样其实也可以进行释放，切断了那根线，但是为了释放，重新开辟一个空间存放2，无意义
</script>
</body>
</html>
3.数据_变量_内存1（堆——栈）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.什么是数据？
* 存储在内存中代表特定信息的'东东',本质上是0101......
* 数据的特点：可传递，可运算
* 一切皆数据(一切皆对象不严谨：数据类型不算是对象)
*内存中所有的操作的目标：数据
* 算术运算
* 逻辑运算
* 赋值运算(拷贝)
* 运行函数(fun() 把括号看做一个运算符)
运算是类型进行的运算，不同的类型有不同的运算（固定规则，由引擎决定的）
2.什么是内存？(内存条)
* 内存条通电后产生的可存储数据的空间(临时的)
* 内存的产生和死亡：内存条(电路板)==>通电==>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失
* 一块小内存的2个数据
* 内部存储的数据
* 地址值
* 内存的分类
* 栈 : 全局变量/局部变量
* 堆 : 对象
3.什么是变量？
* 可变化的量，由变量名和变量值组成
* 每个变量都对应的一小块小内存，变量名用来查找对应的内存（内存中含有值），然后读取这个内存中的数据
4.内存、数据、变量三者之间的关系
* 内存用来存储数据的空间(临时空间)
* 变量是内存的标识(变量名找到内存 变量值是内存中的值)
-->
</body>
<script type="text/javascript">
var age = 18;
console.log(age);
var obj = {name:'Tom'};
console.log(obj.name);
function fun(){
var obj = {name:'Tom'};
//obj栈=堆{name:'Tom'};
}
//传递的是3不是a：可传递
//进行运算：先把3传过来，再进行运算
//是直接把a的值拷贝一份
var a = 3 ;
var b = a + 2;
</script>
</html>
4.数据_变量_内存2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
问题：var a =xxx, a内存中到底保存的是什么？
* xxx是基本数据，保存的就是这个数据
* xxx是对象，保存的是对象的地址值
* xxx是一个变量，保存的是xxx的内存内容(可能是基本数据，也可能是地址值)，主要看xxx有什么
*
*
*
-->
<script type="text/javascript">
var a = 3;
a = function(){
};
var b = 'abc';
a = b;//a中保存的是abc：基本数据
b = {};
a = b;//a中现在保存的是地址值：地址值
</script>
</body>
</html>
5.数据_变量_内存3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
关于引用变量的赋值问题
* n个引用变量指向同一个对象，通过一个变量修改对象内部数据，其他所有变量看到的是修改之后的数据
* 2个引用变量指向同一个对象，让其中的一个引用的变量指向另一个对象，另一引用变量依然指向前一个对象
-->
<script type="text/javascript">
// var obj1 = {name:'Tom'};
// var obj2 = obj1;
// //obj2 放的是obj1的内容，而obj1内容现在只是一个地址值
// //而不是单单说存放的是一个地址值（严格说明存放的是内容，内容中有地址值）
// obj1.name = 'jack';
// console.log(obj2.name);//'jack'
//
//可以根据描述写出一段适合的代码
var obj1 = {name:'Tom'};
var obj2 = obj1;
obj2.age=12;
console.log(obj1.age);//显示12
//隐含的
function fun(obj){//形参
obj.name = "jack";
};
fun(obj1);//实参：传过去的是obj1的内容(obj1里面传的是内容，内容就是内存的地址，然后通过地址找到该数据)
console.log(obj2.name);
//总结：这里一共有三个引用变量：obj1 obj2 obj 对象是内存存放的东东
//再来
var a = {age:12};
var b = a;
a={name:'BOB',age:13};
b.age = 14;
console.log(b.age , a.name , a.age);// 14 Bob 13
function fun2(obj){
obj = {age : 15};
};
fun2(a);
console.log(a.age);// 13
//总结：因为局部的原因，a.age=13
//当fun2(a),obj接收的是a的地址，但是obj又在内部重新定义了一个创建了对象
//所以，a和obj开始时相同，但到最后obj新建对象的时候就不相同了，两个不相关的对象
</script>
</body>
</html>
6.数据_变量_内存4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02_关于数据的传递问题</title>
</head>
<body>
<!--
问题：在js调用函数时传递变量参数时，是值传递还是引用传递
答：
值传递
* 理解1: 都是值(基本值/地址值)传递
* 理解2: 可能是值传递，可能是引用传递(地址值)
看你怎么理解：引用传递的就是内容，内容包含地址值
-->
</body>
<script type="text/javascript">
var a = 3;
function fun(a){
a=a+1;
//console.log(a);
};//传递的是3不是a
fun(a);
console.log(a);
function fun2(obj){
console.log(obj.name);
};
var obj = {name:'Tom'};
fun2(obj);
</script>
</html>
7.数据_变量_内存5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02.内存管理</title>
</head>
<body>
<!--
问题：JS引擎如何管理内存
1. 内存的生命周期
* 分配小内存空间，得到使用权
* 存储数据，可以反复进行操作
* 释放当前小内存空间
2. 释放内存
* 局部变量：函数执行完自动释放
* 对象：成为垃圾对象==>由垃圾回收器回收
*
-->
<script type="text/javascript">
var a = 3;
var obj = {};
function fun(){
//var b = 4;
var b = {}
}
fun();
//函数中的变量会在函数调用的时候产生，函数执行结束的时候释放
//释放和回收是不一样的，回收的需要垃圾回收器有时间间隔，，释放就很快
//b是自动释放，b所指向的对象是在后面的某个时刻由垃圾回收器回收
</script>
</body>
</html>
8.对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01.对象</title>
</head>
<body>
<!--
1.什么是对象
* 多个数据的封装体
* 用来保存多个数据的容器
* 一个对象代表实现中的一个事物（此时代表一个人）
2.为什么要使用对象
* 统一管理内部的数据
*
3.对象的组成
* 属性 : 属性名(字符串)和属性值(任意)组成
* 方法 : 一种特别的属性(属性值是函数)
*
* 可以将对象中的方法称为属性也可以，就像是你将 函数 或者 数组 称为一个对象也是可以的
*
4.如何访问对象的内部数据？
* .属性名 : 编码简单，有时不能用
* ['属性名'] : 编码麻烦，能通用
* 以上两种方式都可以
*
* 那么？？？？？什么时候可以使用这一种['属性名']
-->
<script type="text/javascript">
//我们要想用编程语言去描述现实世界中的一个事物，那就只能用对象来进行描述
var p = {
//'name':'Tom',可以这样写
name:'Tom',
age:12,
setName:function (name){
this.name = name;
},
setAge:function(age){
this.age = age;
}
};
//对象是用来替代这种 变量赋值的
//var name = 'Tom';
//var age =18;
p.setName('Bob');//解析：先是 .属性名得到一个属性，但是这个属性名里面含有函数，就必须加上()才能调用函数
p['setAge'](23);
//console.log(p.name,p.setName);是成立的
console.log(p.name , p['age']);
</script>
</body>
</html>
9.对象2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03.相关问题</title>
</head>
<body>
<!--
问题：什么时候必须是先用的['属性名']的方式???
1. 属性名包含特殊字符：- 空格
2. 属性名不确定
-->
<script type="text/javascript">
var p ={}
//1.给p对象添加一个属性：content-type：text/json
//p.content-type ="text/json";//显示报错
//修改为：
p['content-type'] ="text/json";
//p.contentType ="text/json";
console.log(p['content-type']);
//console.log(p.contentType);
//2.属性名不确定(和属性值不确定的时候)
var propName = 'myAge';
var value = 18;
p[propName] = value;
console.log(p[propName]);
/*
* 这一种就是：将myAge作为属性传进去
* 然后把myAge的值覆盖成18
*
* 得出:
* Object { "content-type": "text/json", myAge: 18 }
*/
//console.log(p);
/* p.propName = value; //不能用？？？？？？
console.log(p.propName); //我试过可以用啊18
这里的是可以用：但是存的不是'myAge',存的是myAge为属性名，所以不能用
得出:用的是propName，但是用的是myAge
Object { "content-type": "text/json", propName: 18 }
*/
</script>
</body>
</html>
10.函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
函数还挺复杂的，因为他是对象，一种特殊的对象，所有它具有对象的复杂度
并且还有函数自身带的复杂度
-->
<body>
<!--
1.什么是函数
* 实现特定功能的n条语句的封装
* 只有函数是可以执行的，其它类型的数据不能执行
2.为什么要用函数
* 提高代码复用
* 便于阅读交流
3.如何定义函数
* 函数声明
* 表达式
4.如何调用(执行)函数？
* test(); 直接调用
* obj.test(); 通过对象调用
* new test(); new 调用
* test.call/apply(obj); 临时让test成为obj的方法进行调用
-->
</body>
<script type="text/javascript">
/*
编程程序实现以下功能需求：
* 1. 根据年龄输出对应的信息
* 2. 如果小于18，输出: 未成年，再等等
* 3. 如果大于60，输出: 算了吧！不需要
* 4. 其它，输出:刚好
*
*/
function fun(age){
if(age<18){
alert("未成年，再等等");
}else if(age>60){
alert("算了吧！不需要");
}else{
alert("刚好");
}
};
fun(17);
fun(20);
fun(65);
function fun1(){//函数声明
console.log('fun1()');
}
var fun2 = function(){//表达式
console.log('fun2()');
}
fun1();
fun2();
var obj = {}
function test2(){
this.xxx = 'atguigu';
}
//obj.test();不能直接调用，根本就没有
test.call(obj);//相当于obj.test(); 可以让一个函数成为指定任意对象的方法进行调用
console.log(obj.xxx);
// 这也是JS强大的地方，这是别的语言做不到的：可以让一个函数成为指定任意对象的方法进行调用
</script>
</html>
11.回调函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05.回调函数</title>
</head>
<body>
<button id="btn">测试点击事件</button>
<!--
1. 什么函数才是回调函数？
* 你定义的函数
* 你没有调的的函数
* 但最终它执行了
2. 常见的回调函数？
* dom事件回调函数==>发生事件的dom元素
* 定时器回调函数==>window
还没学的两种
* ajax请求回调函数(后面讲)
* 生命周期回调函数(后面讲)
-->
<script type="text/javascript">
/*var btn = document.getElementById("btn");
btn.onclick = function(){alert(this.innerHTML)};*/
document.getElementById("btn").onclick = function(){//dom事件回调函数
alert(this.innerHTML);
};
//定时器
// 超时定时器
// 循环定时器
setTimeout(function(){ // 定时器回调函数
alert('到点了');
},5000)
</script>
</body>
</html>
12.IIFE立即执行函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IIFE</title>
</head>
<body>
<!--
1.理解
* 全称：Immediately-Invoked Function Expression
2.作用
* 隐藏实现
* 不会污染外部(全局)命名空间
* 用它来编写JS模块
-->
</body>
<script type="text/javascript">
(function (){//匿名函数自调用
var a = 3;
console.log(a+3);
})();
//即使定义一个a也互不影响
//一个局部变量，一个全局变量
var a = 4;
console.log(a);
//(function(){})这是一个模块
(function(){
var a=1;
function test(){
console.log(++a);
}
window.$ = function(){// 向外暴露一个全局函数
return{
//属性名:属性值
test:test
}
}
})();
$().test();//1.$是一个函数 2. $执行后返回的是一个对象
//$()为什么这样用的
</script>
</html>
13.函数中的this
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1. this是什么？
* 任何函数本质都是通过某个对象来调用的，如果没有指定就是window调用的
*
* 所有函数内部都有一个变量this
* 它的值是调用函数的当前对象
2. 如何确定this的值
* test(); window
* p.test(); p
* new test(); 新建的对象
* p.call(obj); obj
-->
<script type="text/javascript">
function Person(color){
console.log(this);
this.color = color;
this.getColor = function(){
console.log(this);
return this.color;
};
this.setColor() = function (color){
console.log(this);
this.color = color;
};
}
//别等着完成再看，要边做边看
Person("red");//this是谁??? window 1
var p = new Person("yellow");//this是谁??? p 1 可以结束为new当前对象来调用的
p.getColor();//this是谁??? p
var obj = {};
p.setColor.call(obj,"black");//this是谁??? obj
/*
让setColor()成为obj的临时方法进行调用
* call强制改变this指向
* */
var test = p.setColor;
test();//this是谁??? window
function fun1(){
function fun2(){
console.log(this);
}
fun2();//this是谁??? window
}
fun1();
</script>
</body>
</html>
扫一扫
369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
