JavaScript基础 this、作用域、构造函数
一、作用域
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> // 作用域:指每一个变量的作用的范围 // 在js中一共有两种作用域: //1.全局作用域 // 直接编写在script标签中的js代码,都在全局作用域 // 在全局作用域中有一个全局对象window,它代表的是一个浏览器的窗口 // 在全局作用域中创建的变量都会作为window对象的属性保存 // 创建的函数都会作为window对象的方法保存 var a = 10; var b = "hello"; console.log(window.a); console.log(window.b); //2.函数作用域 // 调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁 // 每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的 // 在函数作用域中可以访问到全局作用域的变量 // 在全局作用域中无法访问到函数作用域的变量 // 当在函数作用域中操作一个变量时,它会先在自身作用域中寻找 // 如果有就直接使用,如果没有则向上一级寻找,直到找到全局作用域 // 如果全局作用域中依然没有找到,则会报错 // 在函数中要访问全局变量可以使用window对象 var a = 10; function fun(){ var a = "函数值的变量a" // console.log("a = "+a); function fun2(){ console.log("a = "+a); ------>结果是 函数值的变量a } } fun2(); </script> </head> <body> </body> </html>
二、基础 this
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> // 解析器在调用函数每次都会向函数内部传递一个隐含的参数 // 这个隐含的参数就死this，this指向的是一个对象 // 这个对象我们称为函数执行的上下文对象 // 根据函数的调用方式不同,this会指向不同的对象 // 1.以函数的形式调用时,this永远都是window // 2.以方法的形式调用时,this就是调用方法的那个对象 var name = "全局"; function fun(){ console.log(this.name); } // 创建两个变量 var obj = { name:"孙悟空", sayname:fun }; var obj2 = { name:"猪八戒", sayname:fun }; obj.sayname(); ------>结果为 孙悟空 obj2.sayname(); ------>结果为 猪八戒 fun(); ------>结果为 全局 </script> </head> <body> </body> </html>
三、构造函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> // 创建一个构造函数,专门用来创建Person对象 // 构造函数就是一个普通的函数,创建方式和普通函数没有区别 // 不同的是构造函数习惯首字母大写 // 构造函数和普通函数的区别就是调用方式的不同 // 普通函数是直接调用,而构造函数需要使用new关键字来调用 // 构造函数的执行流程: // 1.立即创建一个新的对象 // 2.将新建的对象设置为函数中的this,在构造函数中可以使用this来引用新建的对象 // 3.逐行执行函数中的代码 // 4.将新建的对象作为返回值返回 // 使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类 // 我们将通过一个构造函数创建的对象,称为是该类的实例 // this的情况: // 1.当以函数的形式调用时,this是window // 2.当以方法的形式调用时,谁调用方法this就是谁 // 3.当以构造函数的形式调用时,this就是创建的那个对象 function Person(name , age , gender){ this.name = name; this.age = age; this.gender = gender; this.sayName = function(){ alert(this.name); }; } var per = new Person("你好" , 18 , "男"); var per2 = new Person("你好" , 18 , "女"); var per3 = new Person("你好" , 20 , "男"); var dog = new Dog(); console.log(per); console.log(per2); console.log(per3); // 使用instanceof可以检查一个对象是否是一个类的实例 // 如果是,则返回true;否则返回false console.log(per instanceof Person); </script> </head> <body> </body> </html>
