何谓JS??
一.JS的使用方式:
1、行内JS:写在html标签中的js代码
2、内部JS:写在<script type="text/javascript"></script>标签之间可以放在html中的任意位置,一般放在<head>标签中或<body>标签中或<body>标签后
3、外部JS:引入外部的js文件<script type="text/javascript" src="js文件的路径" ></script>
注:如果<script>标签中设置了src属性,name写在<script>双标签中的js代码无效
二.语句和注释:
1.语句:语句(statement)是为了完成某种任务而进行的操作,语句以分号结尾,一个分号即表示一个语句结束。多个语句可以写在一行内(不建议这么写代码),但是一行写多条语句时,语句必须以分号结尾。表达式不需要分号结尾。一旦在表达式后面添加分号,则 JavaScript 引擎就将表达式视为语句,这样会产生一些没有任何意义的语句
2.变量:所有的声明都通过"var"
3.注释: // 单行注释;/* 多行注释 */
三.变量:
1.变量的声明:JavaScript是一种弱类型语言,声明时不需要指定数据类型,直接通过var修饰符声明:先声明再赋值;声明并赋值
注:如果声明变量时不使用var修饰符,则该变量是全局变量
2.变量的注意点: 1)若只声明而没有赋值,则该变量的值为 undefined;2)变量要有定义才能使用,若变量未声明就使用,JavaScript 会报错,告诉你变量未定义;3)可以在同一条 var 命令中声明多个变量。;4)若使用 var 重新声明一个已经存在的变量,是无效的。;5)若使用 var 重新声明一个已经存在的变量且赋值,则会覆盖掉前面的值;6)JavaScript 是一种动态类型、弱类型语言,也就是说,变量的类型没有限制,可以赋予各种类型的值
3.变量提升:JavaScript 引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升.
四.数据类型:
1.JavaScript 中有 6 种数据类型,其中有五种简单的数据类型: Undefined、Null、布尔、 数值和字符串。一种复杂数据类型 Object。
(1).数 值(Number): 整数和小数(比如 1 和 3.14)
(2).字符串(String): 字符组成的文本(比如"Hello World")
(3).布尔值(Boolean):true(真)和 false(假)两个特定值
(4).Undefined: 表示“未定义”或不存在,即此处目前没有任何值
(5).Null: 表示空缺,即此处应该有一个值,但目前为空
(6).对象(object)(引用) : 各种值组成的集合:1)、对象(object){name:”zhangsan”,age:”18”};2)、数组(array)[1,2,3];3)、函数(function)function test() {}
2.typeof 操作符:typeof 操作符是用来检测数据类型。
说明: 1、typeof null 返回的是 object 字符串2、函数不是数据类型,但是也可以使用 typeof 操作符返回字符串。typeof 操作符可以操作变量也可以操作字面量。
注意:函数在 JavaScript 中是对象,不是数据类型,所以使用 typeof 区分 function 和object 是有必要的
(1)undefined
undefined 类型的值是 undefined。undefined 是一个表示"无"的原始值,表示值不存在。出现 undefined 的常见情况:
1)当声明了一个变量而没有初始化时,这个变量的值就是 undefined
2)当函数需要形参,但未传递实参时
3)函数没有返回值,但定义了变量接收
(2)null
null 类型是只有一个值的数据类型,即特殊的值 null。它表示空值,即该处的值现在为空,
它表示一个空对象引用。
使用 Null 类型值时注意以下几点:
1)使用 typeof 操作符测试 null 返回 object 字符串。
2)undefined 派生自 null,所以等值比较返回值是 true。所以,未初始化的变量和赋值为 null 的变量相等
(3)数值型:数值型包含两种数值:整型和浮点型。
1)所有数字(整型和浮点型)都是以 64 位浮点数形式储存。所以,JS 中 1 与 1.0 相等,而且 1 加上 1.0 得到的还是一个整数。浮点数最高精度是 17 位小数,由于浮点数运算时可能不精确,尽量不要使用浮点数做判断。
2)在存储数值型数据时自动将可以转换为整型的浮点数值转为整型。
3)对于过大或过小的数值,可以使用科学计数法来表示
4)Infinity、-Infinity:超过了表数范围,出现 Infinity(正无穷)或者-Infinity(负无穷)
isFinite()函数可以确定是否超出范围:
true:没有超出;false:超出了
(4)NaN
表示非数值(Not a Number),是一个特殊的值。
如:将字符串解析成数字出错的场合。
console.log(parseInt("abc"));//parseInt 方法将字符串解析为数值,但若无法解析,返回 NaN
注意: NaN 不等于任何值,包括它本身,因为它不是一个值;NaN 与任何数(包括它自己)的运算,得到的都是 NaN;isNaN()可以用来判断一个值是否为 NaN;true:不是数字;false:是数字
(5)字符串
使用 ' ' 或 " "引起来,如:'sxt',"good"。
使用加号’+’进行字符串的拼接,如:console.log('hello' + ' everybody');
(6)对象
instanceof 运算符
typeof 操作符对数组(array)和对象(object)的显示结果都是 object,那么可以利用;instanceof 运算符,它可用于判断一个变量是否某个对象的实例
3.具体示例如下:
<script type="text/javascript">
var a = 1; // 数值型
console.log(typeof a); // number
var b = true; // 布尔型
console.log(typeof b); // boolean
var c = "Hello"; // 字符串
console.log(typeof c); // string
var d; // 未定义
console.log(typeof d); // undefined
var e = null; // null
console.log(typeof e); // object
var obj = {}; // 空对象
var obj2 = {uname:"zhangsan"};
var obj3 = new Object();
obj3.age=18;
console.log(typeof obj); // object
console.log(typeof obj2); // object
console.log(typeof obj3); // object
// 函数
function test(str) {
}
console.log(typeof test); // function
console.log("================undefined===========");
// 1)当声明了一个变量而没有初始化时,这个变量的值就是 undefined
var aa;
console.log(aa);
// 2)当函数需要形参,但未传递实参时
function tt(num) {
console.log(num);
}
tt(); // 未传递实参
// 3)函数没有返回值,但定义了变量接收
function tt2() {
console.log("函数...");
// return true;
}
tt2();
var t = tt2(); // 没有返回值
console.log(t);
console.log("=================null==================");
// 1)使用 typeof 操作符测试 null 返回 object 字符串。
// 2)undefined 派生自 null,所以等值比较返回值是 true。所以,未初始化的变量和赋值为 null 的变量相等
// undefined 派生自 null
console.log(undefined == null); // true
var ab; // 只声明未赋值返回undefined
console.log(ab == null); // true
console.log("======================数值型=================");
// 浮动性自动转整型
console.log(1 + 2.0); // 3
var n = 5.0;
console.log(n); // 5
// 数值过大或过小会使用科学计数法显示
var num2 = 4.12e9;
console.log(num2);//4120000000
console.log(0.0000000412);//4.12e-8
// 正无穷和负无穷
console.log(100e1000);//Infinity
console.log(-100e1000);//-Infinity
console.log(1 / -0 );// 除以负 0 得到-Infinity
console.log(1 / +0); // 除以 0 得到 Infinit
// isFinite()
console.log(isFinite(1)); //true
console.log(isFinite(100e1000)); //fasle
// NaN
console.log(parseInt("123")); // 123
console.log(parseInt("abc")); // NaN
console.log(NaN == NaN); // false
console.log(parseInt("abc") + 1); // NaN
// isNaN()可以用来判断一个值是否为 NaN
console.log(isNaN(parseInt("123"))); // false
console.log(isNaN(parseInt("abc"))); // true
console.log("================字符串===================");
console.log('Hello' + " everyone");
console.log("===============对象====================");
// instanceof 运算符
var o = {};
var ar = [];
console.log(o instanceof Object); // true
console.log(ar instanceof Array); // true
</script>
五.类型转换
1、自动类型转换
(1)、函数转换
parseInt()
1)、parseInt()在转换之前,首先会分析该字符串,判断位置为 0 处的字符,判断它是否是个有效数字,如果不是,则直接返回 NaN,不再继续,如果是则继续,直到找到非字符
2)、parseInt()方法还有基模式,可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由 parseInt()方法的第二个参数指定的
3)、如果十进制数包含前导 0,那么最好采用基数 10,这样才不会意外地得到八进制的值
(2)parseFloat()
parseFloat()方法与 parseInt()方法的处理方式相似,但是parseFloat()可以识别第一个小数点
2.显示转换
(1)toString()函数将内容转换为字符串形式,其中 Number 提供的
toString()函数可以将数字以指定的进制转换为字符串,默认为十进制。
(2)Number 还提供了 toFixed()函数将根据小数点后指定位数将数字转为字符串,四舍五入
3.强制转换
JS 为 Number、Boolean、String 对象提供了构造方法,用于强制转换其他类型的数据。此时操作的是整个数据,而不是部分
六.数组
1.数组的特点:
(1)数组的长度是可变的;(2)数组的类型可以不一样;(3)不存在下标越界
2.数组的定义:(1)隐式创建:var 变量名 = [值1,值2,...]; (2)直接实例化:
var 变量名 = new Array(值1,值2,...);
(3)实例化并指定长度:var 变量名 = new Array(size);
获取数组的长度:数组.length
3、数组的遍历
数组的遍历即依次访问数组的每一个元素 ,JS 提供三种遍历数组的方式:
(1)普通 for 循环遍历
for(var i = 0; i < 数组名.length; i++) {}
注:可以拿到undefinded的值,无法获取数组中属性对应的值
(2)、for ... in
for(var i in 数组) {
// i是下标或属性名
}
注:无法拿到undefinded的值,可以获取数组中属性对应的值
(3)foreach
数组.foreach(function(element,index){
// element:元素;index:下标
});
注:无法获取属性对应的值与undefinded的值
for -- 不遍历属性;foreach -- 不遍历属性和索引中的 undefined;for in -- 不遍历索引中的 undefined
4.数组提供的方法
push 添加元素到最后
unshift 添加元素到最前
pop 删除最后一项
shift 删除第一项
reverse 数组翻转
join 数组转成字符串
indexOf 数组元素索引
slice 截取(切片)数组,原数组不发生变化
splice 剪接数组,原数组变化,可以实现前后删除效果
concat 数组合并
5.具体的示例如下:
<script type="text/javascript">
// 1、隐式创建
var arr1 = [1,'a','b','c'];
// 2、直接实例化
var arr2 = new Array('aa','bb','cc');
// 3、实例化并指定长度
var arr3 = new Array(5);
// 获取数组的长度
console.log(arr1.length);
console.log(arr2.length);
console.log(arr3.length);
arr1.length = 10;
console.log(arr1.length);
console.log(arr1);
// 赋值
arr1[0] = 2; // 修改数组的值
arr1[6] = 'hello'; // 修改数组的值
arr1[13] = '13';
console.log(arr1);
// 取值
console.log(arr1[10]);
// 设置数组的属性
arr1["ii"] = "zhangsan";
console.log(arr1);
console.log(arr1.ii);
console.log("=======数组的遍历=========");
// 1、普通 for 循环遍历
for (var i = 0; i < arr1.length; i++) {
console.log(i + "----------" + arr1[i]);
}
console.log("===============");
// for... in
for (var i in arr1) {
console.log(i + '----------' + arr1[i]);
}
console.log("===============");
// foreach
arr1.forEach(function(elem,index){
console.log(index+ '----' + elem);
});
console.log("========数组提供的方法=======");
console.log(arr2);
arr2.push("dd"); // 数组的最后添加元素
arr2[arr2.length] = "ee";
console.log(arr2);
arr2.unshift("hello");
console.log(arr2);// 数组的最前面添加元素
// 分割数组
var str = arr2.join("-");
console.log(str);
// 将字符串转换成数组
var strarr = str.split("-");
console.log(strarr);
</script>
七.函数
函数,即方法。函数也是对象。
1、函数的定义
定义方式有3种:
(1)、函数声明语句:function 函数名([形参]) {},调用:函数名([实参]);
(2)函数定义表达式:var 变量名/函数名 = function([形参]){},调用:变量名([实参])/函数名([实参]);
(3)Function构造函数var 函数名 = new Function('参数1','参数2','函数的主体内容');调用:函数名([实参]);
注:构造韩束的最后一个参数是函数体。
2.注意:(1)、js 中的函数没有重载,同名的函数,会被后面的函数覆盖。
(2)、js 中允许有不定数目的参数,后面介绍 arguments 对象
3.函数名的提升(了解)
JavaScript 引擎将函数名视同变量名,所以采用 function 命令声明函数时,整个函数会像变量声明一样,被提升到代码头部。所以,下面的代码不会报错;但是,如果采用赋值语句定义函数,JavaScript 就会报错。
4.具体示例:
<script type="text/javascript">
/* 函数的定义 */
// 1、函数声明语句
function fn1(a,b) {
console.log(a+b);
}
fn1(1,1);
// 2、函数定义表达式
var fn2 = function(x){
console.log(x);
}
console.log(fn2);
fn2(10);
// 3、Function构造函数
var fn3 = new Function('x','y','console.log(x+y);')
fn3(1,2);
fn4();
/*函数名的提升*/
function fn4() {
console.log("函数名的提升。。。。");
}
fn5();
var fn5 = function(){
console.log("函数名的提升...");
}
</script>
八. 函数的参数、调用和return
1.参数函数运行的时候,有时需要提供外部数据,不同的外部数据会得到不同的结果,这种外部数据就叫参数,定义时的参数称为形参,调用时的参数称为实参
(1)、实参可以省略,那么对应形参为 undefined
(2)若函数形参同名(一般不会这么干):在使用时以最后一个值为准。
(3)可以给参数默认值:当参数为特殊值时,可以赋予默认值。
(4)参数为值传递,传递副本 ;引用传递时传递地址,操作的是同一个对象
2.函数的调用
(1)常用调用方式:函数名([实参]);存在返回值可以变量接收,若接收无返回值函数则为 undefined
(2)函数调用模式
(3)方法调用模式
(4)call()和apply()
注:谁调用函数,this就指向谁
3.匿名函数立即调用
(1)匿名函数:function ([参数]){}
(2)调用:(function ([形参]) {})([实参]);
在函数只被使用一次的情况下可以使用这种方式,简便省事
4.return 语句
函数的执行可能会有返回值,需要使用 return 语句将结果返回。return 语句不是必需的,
如果没有的话,该函数就不返回任何值,或者说返回 undefined。
作用:在没有返回值的方法中,用来结束方法。
有返回值的方法中,一个是用来结束方法,一个是将值带给调用者。
5.具体的实例:
<script type="text/javascript">
/* 参数 */
// 1、实参可以省略,那么对应形参为 undefined
function fn1(a,b) {
console.log(a);
}
fn1();
fn1(1);
fn1(1,2);
// 2、若函数形参同名(一般不会这么干):在使用时以最后一个值为准。
function fn2(x,x){
console.log(x);
}
fn2(10,20);
// 3、可以给参数默认值:当参数为特殊值时,可以赋予默认值。
function fn3(str) {
str = str || "Hello";
console.log(str);
}
fn3();
fn3("你好");
function fn4(str) {
(str !== undefined && str !== null) ? str = str : str = "值不存在";
console.log(str);
}
fn4();
fn4("你好呀");
// 4、参数为值传递,传递副本 ;引用传递时传递地址,操作的是同一个对象
// 值传递
var num = 10;
function fn5(n) {
n = 20;
}
fn5(num);
console.log(num);
// 引用传递
var arr = [1,2,3];
var obj = {
uname:"zhangsan"
};
function fn6(a,b) {
a[0] = 100;
b.uname = "lisi";
}
fn6(arr,obj);
console.log(arr);
console.log(obj);
function fn7(a,b) {
a = [4,5,6];
b = {
uname:"wangwu"
};
}
fn7(arr);
console.log(arr);
console.log(obj);
console.log("===============函数的调用==============");
// 直接调用
function fn8() {
console.log(this); // Window对象
}
fn8();
// 函数调用模式
var fn9 = function() {
console.log(this); // Window对象
return 1;
}
var f = fn9();
console.log(f);
// 方法调用模式
var obj = {
uname:"zhangsan",
uage:18,
cats:["喵喵","猫猫"],
sayHello:function() {
console.log(this); // obj对象
console.log("你好呀~");
}
};
console.log(obj.sayHello);
obj.sayHello();
// 间接调用
var obj2 = {};
function fn10(x,y) {
console.log(x+y);
console.log(this);
}
fn10(1,2); // Window对象
fn10.call(); // Window对象
fn10.call(obj2); // obj2
fn10.call(obj2,10,20); // obj2
fn10.apply(obj2,[100,200]); // obj2
console.log("===============匿名函数立即调用==============");
(function(a,b) {
console.log(a-b);
})(10,2);
</script>
九. arguments 对象和函数的方法及属性
1.arguments对象可以得到函数的实参数量
函数名.name 得到函数名称
函数名.length 得到函数的形参数量
函数名.toString() 得到函数的源码
2.具体示例:
<script type="text/javascript">
function fn1 (a,b,c) {
// arguments对象可以得到函数的实参数量
console.log(arguments.length);
console.log("函数....");
console.log(arguments);
}
fn1(1,2);
console.log(fn1.name);
console.log(fn1.length);
console.log(fn1.toString());
</script>
十. 函数的作用域
1.函数作用域:全局(global variable)和局部(local variable)
1)全局变量与局部变量同名问题
2)在函数中定义变量时,若没有加 var 关键字,使用之后自动变为全局变量
3)变量作用域提升
2.具体示例
<script type="text/javascript">
var num = 1;
function fn() {
var num = 10; // 这是个局部变量,与全部变量毫无关系
console.log(num); // 就近原则
var b = 2; // 局部变量
c = 3; // 不用var修饰符声明的变量时全局变量
}
fn();
console.log(num);
//console.log(b);
console.log(c);
function foo(x) {
if (x > 100) {
var tmp = x - 100;
}
console.log(tmp);
}
function foo(x) {
var tmp;
if (x > 100) {
tmp = x - 100;
}
console.log(tmp);
}
foo(1);
</script>
十一. 闭包
1.闭包的形成:
(1)外部函数内部嵌套内部函数
(2)内部函数中使用外部函数的环境
(3)外部函数返回内部函数
2.闭包的作用:
(1)获取函数内部的变量
(2)保存变量的值在内存中
(3)避免变量名重复
3.具体示例
<script type="text/javascript">
// 1、外部函数内部嵌套内部函数
function fn1() {
var a = "Hello!";
function fn2() {
// 2、内部函数中使用外部函数的环境
console.log(a);
}
// 3、外部函数返回内部函数
return fn2;
}
var f = fn1();
console.log(f);
f();
function test() {
var num = 1;
num++;
console.log(num);
}
test();
test();
test();
console.log("====================");
// 1、外部函数内部嵌套内部函数
function outFn() {
var num = 1;
function inFn(){
// 2、内部函数中使用外部函数的环境
num++;
console.log(num);
}
// 3、外部函数返回内部函数
return inFn;
}
var inF = outFn();
inF();
inF();
inF();
inF();
var inF1 = outFn();
inF();
console.log("===========浇水实例=========");
document.write("==========浇水实例=========<br>");
// 定义外部函数,设置形参(水壶的容量)
function waterFlower(total) {
// 定义内部函数,执行浇水过程 (每次浇水,水容量减50ml)
function water(flower) {
// 当水容量大于50ml则浇水
if (total >= 50) {
// 每次浇水减50
total = total - 50;
} else {
// 如果没水,则自动加水
document.write("<h4>正在重新装水....</h4>");
total = 200;
// 浇水
total = total - 50;
//
}
document.write("给"+flower+"浇水50ml,剩余" + total + "ml的水!<br>");
}
// 返回内部函数
return water;
}
// 装水
var t = waterFlower(200);
// 浇水
t("桃花");
t("兰花");
t("玫瑰花");
t("菊花");
t("桂花");
</script>
十二. JS 内置对象
1.(1)Arguments 只在函数内部定义,保存了函数的实参
(2)Array 数组对象
(3) Data 日期对象,用来创建和获取日期
(4) Math 数学对象
(5)String 字符串对象,提供对字符串的一系列操作
String: ◦ charAt(idx):返回指定位置处的字符 ◦ indexOf(Chr):返回指定子字符串的位置,从左到右。找不到返回-1 ◦ substr(m,n):返回给定字符串中从 m 位置开始,取 n 个字符,如果参数 n 省略, 则意味着取到字符串末尾。 ◦ substring(m,n):返回给定字符串中从 m 位置开始,到 n 位置结束,如果参数 n 省 略,则意味着取到字符串末尾。 ◦ toLowerCase():将字符串中的字符全部转化成小写。 ◦ toUpperCase():将字符串中的字符全部转化成大写。 ◦ length: 属性,不是方法,返回字符串的长度。
Math: ◦ Math.random() ◦ Math.ceil() :天花板 大于最大整数 ◦ Math.floor() :地板 小于最小整数 String
Date: //获取 ◦ getFullYear()年, getMonth()月, getDate()日, ◦ getHours()时,getMinutes()分,getSeconds()秒 //设置 ◦ setYear(), setMonth(), … ◦ toLoacaleString()
说明: 1.getMonth():得到的值:0~11(1 月~12 月) 2.setMonth():设置值时 0~11 3.toLocaleString():可根据本地时间把 Date 对象转换为字符串,并返回结果
十三. JS对象
JS中一切数据皆对象。
1、定义对象
JS 创建自定义对象,主要通过三种方式:
(1)字面量形式创建对象
var 变量名 = {}; // 空对象
var 变量名 = {键:值,....};
(2)通过 new Object 对象创建
var 变量名 = new Object();
(3)通过 Object 对象的 create 方法创建对象
var 变量名 = Object.create(null或对象);
2、对象的序列化和反序列化
序列化即将 JS 对象序列化为字符串,反序列化即将字符串反序列化为 JS 对象。JS 中通过
调用 JSON 方法,可以将对象序列化成字符串,也可以将字符串反序列化成对象 。
序列化对象,将对象转为字符串
JSON.stringify(object)
反序列化,将一个 Json 字符串转换为对象。
JSON.parse(jsonStr)
3、eval()
(1)可借助 eval()动态函数,将参数字符串解析成 js 代码来执行,只接受原始字符串作为参数
eval(“console.log(‘你好’)”);//控制台输出你好
(2)可将 json 串转为 json 对象
1)第一种解析方式:得到的 json 对象名就是 jsonObj
eval("var jsonObj = " + jsonStr);
2)第二种解析方式:对象中有多个属性
var jsonObj = eval("(" + jsonStr + ")");
由于 json 是以{ }的方式来开始以及结束的,在 eval 中会被当成一个语句块来处理,故必 须强制将它转换成一种表达式。加上圆括号是使 eval 函数在处理时强制将括号内的表达式转化为对象而不作为语句来执行。
3)第二种解析方式:对象中只有一个属性
eval(jsonStr);
4.具体示例:
<script type="text/javascript">
// 1、字面量形式创建对象
var obj = {}; // 空对象
var obj2 = {
uname:"zhangsan",
uage:18
};
obj2.usex=true;
console.log(obj);
console.log(obj2);
// 2、通过 new Object 对象创建
var obj3 = new Object();
obj3.name = "Tom";
console.log(obj3);
// 3、通过 Object 对象的 create 方法创建对象
var obj4 = Object.create(null);
console.log(obj4.uname);
var obj5 = Object.create(obj2);
console.log(obj5.uname);
console.log('============序列化和反序列化============');
var str = '{"uname":"zhangsan", "uage":18 }';
// 反序列化:将字符串转换成对象
var object1 = JSON.parse(str);
console.log(object1);
console.log(object1.uname);
// 序列化,将对象转换成字符串
var json1 = JSON.stringify(object1)
console.log(json1);
console.log(json1.uname);
console.log("=============eval()============");
console.log('你好');
eval("console.log('你好')");//控制台输出你好
// 1)第一种解析方式:得到的 json 对象名就是 jsonObj
var ab = '{"uname":"zhangsan", "uage":18 }';
eval("var jsonObj = " + ab);
console.log(jsonObj);
// 2)第二种解析方式:对象中有多个属性
var jsonObj2 = eval("(" +ab + ")");
console.log(jsonObj2);
var arrStr = "[1,'1a','fg']";
// 第一种解析方式eval("var arrObj = " + arrStr);
eval("var arr=" + arrStr);
console.log(arr);
// 第二种解析方式:eval(arrStr);
console.log(arrStr);
console.log(eval(arrStr));
</script>
十四. this
1.this 是 JavaScript 语言的一个关键字。 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。 随着函数使用场合的不同,this 的值会发生变化。但是有一个总的原则,那就是 this 指的 是,调用函数的那个对象。
(1)在函数中使用 this
在函数中使用 this 属于全局性调用,代表全局对象,通过 window 对象来访问。 function test () { this.x = 1; console.log(this.x); } test(); console.log(x);//相当于定义在全局对象上的属性
var x = 10; console.log(x) // 10
function test (){ console.log(this.x) //10
this.x = 1; console.log(this.x) //1
console.log(this) }
test() console.log(x) //1
console.log(this)
(2)在对象的方法中使用 this
在对象中的函数使用 this,代表当前的上级对象。
var obj = { name : '张三', age : 20, sayHello : function () { console.log(this.name) console.log(this) } } obj.sayHello(); 后面在事件中还会遇到 this,具体情况具体分析。