HTML基础知识JS篇上课笔记5

HTML基础知识JS篇上课笔记5

说出以下代码的执行结果

var a = 123;
function fun(){
	alert(a);
}
fun();
//		局部有就用局部的 没有返回上一级去寻找 


var a = 123;
function fun(){
	alert(a);
	var a = 456;
}
fun();
alert(a);

	//函数提前声明   var提前声明
	
var a = 123;
function fun(){
	alert(a);//用的是局部变量的a  此时因为var提前声明 说以  var a已经存在在{}里  但是没有给a初始化【没有给a赋值】此时结果就是undefined
	var a = 456;//var提前声明
	alert(a);//456
}
fun();
alert(a);	//用全局   123
	//函数提前声明   var提前声明
	
var a = 123;
function fun(){
	alert(a);//用的是全局变量的a 123
	 a = 456;//全局a
	alert(a);//456
}
fun();
alert(a);	//用全局  456

var a = 123;
function fun(){
	alert(a);
	a = 456;
}
fun();
alert(a);

var a = 123;
function fun(a){
	alert(a);
	a = 456;
}
fun();
alert(a);


var a = 123;
function fun(a){
	alert(a);
	a = 456;
}
fun(123);
alert(a);

var a = 123;
function fun(a){//（形参是局部变量：作用域是函数里{}）
	alert(a);//a是局部变量【形参】  777
	a = 456;//形参局部变量456
	alert(a);//456
}
fun(777);//形参是局部变量
alert(a);//全局变量的a=123并没有改变  123



		 * 创建一个对象
		 */
		var obj = new Object();
		
		//向对象中添加属性
		obj.name = "孙悟空";
		obj.age = 18;
		
		//对象的属性值可以是任何的数据类型，也可以是个函数
		obj.sayName = function(){
			console.log(obj.name);
		};
		
//			function fun(){
//				console.log(obj.name);
//			};
		
		console.log(obj.sayName);
		//调方法
		
		//obj.sayName();
		//调函数
		//fun();

• 函数也可以称为对象的属性，
  * 如果一个函数作为一个对象的属性保存，
  * 那么我们称这个函数时这个对象的方法
  * 调用这个函数就说调用对象的方法（method）
  * 但是它只是名称上的区别没有其他的区别

    var obj2 = {
    		
    		name:"猪八戒",
    		age:18,
    		sayName:function(){
    			console.log(obj2.name);
    		}
    		
    	};
    	
    	obj2.sayName();
    	
    	
    
    	alert(d);
    	
    	var a = 10;
    	
    	var b = "hello";
    	
    	c = true;
    	
    	function fun(){
    		alert("hello");
    	}
    	
    	var d = 35;
    
    	/*
    	 * 解析器在调用函数每次都会向函数内部传递进一个隐含的参数,
    	 * 	这个隐含的参数就是this，this指向的是一个对象，
    	 * 	这个对象我们称为函数执行的 上下文对象，
    	 * 	根据函数的调用方式的不同，this会指向不同的对象
    	 * 		1.以函数的形式调用时，this永远都是window[全局变量]
    	 * 		2.以方法的形式调用时，this就是调用方法的那个对象
    	 */
    	
    	function fun(){
    		//console.log("a = "+a+", b = "+b);
    		//this.name=name;
    		console.log(this.name);
    	}
    	
    	//fun();
  

//创建一个对象
var obj = {
name:“孙悟空”,
sayName:fun
};

		var obj2 = {
			name:"沙和尚",
			sayName:fun
		};
		
		//console.log(obj.sayName == fun);
		var name = "全局的name属性";
		//obj.sayName();
		//以函数形式调用，this是window
		//fun();
		 
		//以方法的形式调用，this是调用方法的对象
		obj.sayName();
		//obj2.sayName();
		
	
		//创建一个name变量
		var name = "全局";
		
		//创建一个fun()函数
		function fun(){
			console.log(this.name);
		}
		
		//创建两个对象
		var obj = {
				name:"孙悟空",
				sayName:fun
		};
		
		var obj2 = {
				name:"沙和尚",
				sayName:fun
		};
		
		//我们希望调用obj.sayName()时可以输出obj的名字
		//obj.sayName();
		
		obj.sayName();
			
		
			

		
		/*
		 * 创建一个对象
		 */
		var obj = {
				name:"孙悟空",
				age:18,
				gender:"男",
				sayName:function(){
					alert(this.name);
				}
		};

		/*
		 * 使用工厂方法创建对象
		 * 	通过该方法可以大批量的创建对象
		 */
		function createPerson(name , age ,gender){
			//创建一个新的对象 
			var obj = new Object();
			//向对象中添加属性
			obj.name = name;
			obj.age = age;
			obj.gender = gender;
			obj.sayName = function(){
				alert(this.name);
			};
			//将新的对象返回
			return obj;
		}
		
		/*
		 * 用来创建狗的对象
		 */
		function createDog(name , age){
			var obj = new Object();
			obj.name = name;
			obj.age = age;
			obj.sayHello = function(){
				alert("汪汪~~");
			};
			
			return obj;
		}
		
		var obj2 = createPerson("猪八戒",28,"男");
		var obj3 = createPerson("白骨精",16,"女");
		var obj4 = createPerson("蜘蛛精",18,"女");
		/*
		 * 使用工厂方法创建的对象，使用的构造函数都是Object
		 * 	所以创建的对象都是Object这个类型，
		 * 	就导致我们无法区分出多种不同类型的对象
		 */
		//创建一个狗的对象
		var dog = createDog("旺财",3);
		
		console.log(dog);
		console.log(obj4);

/*
* 创建一个构造函数，专门用来创建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);
			};
		}
		
		function Dog(){
			
		}
		
		var per = new Person("孙悟空",18,"男");
		var per2 = new Person("玉兔精",16,"女");
		var per3 = new Person("奔波霸",38,"男");
		
		var dog = new Dog();
		
		/*console.log(per);
		console.log(dog);*/
		
		/*
		 * 使用instanceof可以检查一个对象是否是一个类的实例
		 * 	语法：
		 * 		对象 instanceof 构造函数
		 * 如果是，则返回true，否则返回false
		 */
		//console.log(per instanceof Person);
		//console.log(dog instanceof Person);
		
		/*
		 * 所有的对象都是Object的后代，
		 * 	所以任何对象和Object左instanceof检查时都会返回true
		 */
		//console.log(dog instanceof Object);

1.对象（Object）
- 对象是JS中的引用数据类型
- 对象是一种复合数据类型，在对象中可以保存多个不同数据类型的属性
- 使用typeof检查一个对象时，会返回object
- 创建对象
- 方式一：
- var obj = new Object();
- 方式二：
- var obj = {};

• 向对象中添加属性
  - 语法：
  对象.属性名 = 属性值;
  对象[“属性名”] = 属性值;

• 对象的属性名没有任何要求，不需要遵守标识符的规范，
  但是在开发中，尽量按照标识符的要求去写。
  - 属性值也可以任意的数据类型。

• 读取对象中的属性
  - 语法：
  对象.属性名
  对象[“属性名”]

• 如果读取一个对象中没有的属性，它不会报错，而是返回一个undefined

• 删除对象中的属性
  - 语法：
  delete 对象.属性名
  delete 对象[“属性名”]

• 使用in检查对象中是否含有指定属性
  - 语法：“属性名” in 对象
  - 如果在对象中含有该属性，则返回true
  如果没有则返回false

• 使用对象字面量，在创建对象时直接向对象中添加属性
  语法：
  var obj = {
  属性名:属性值,
  属性名:属性值,
  属性名:属性值,
  属性名:属性值
  }

• 基本数据类型和引用数据类型
  - 基本数据类型
  String Number Boolean Null Undefined
  - 引用数据类型
  Object
  - 基本数据类型的数据，变量是直接保存的它的值。
  变量与变量之间是互相独立的，修改一个变量不会影响其他的变量。
  - 引用数据类型的数据，变量是保存的对象的引用（内存地址）。
  如果多个变量指向的是同一个对象，此时修改一个变量的属性，会影响其他的变量。
  - 比较两个变量时，对于基本数据类型，比较的就是值，
  对于引用数据类型比较的是地址，地址相同才相同

2.函数（Function）
- 函数也是一个对象，也具有普通对象的功能
- 函数中可以封装一些代码，在需要的时候可以去调用函数来执行这些代码
- 使用typeof检查一个函数时会返回function
- 创建函数
- 函数声明

function 函数名([形参1,形参2…形参N]){
语句…
}

• 函数表达式
  var 函数名 = function([形参1,形参2…形参N]){
  语句…
  };

• 调用函数
  - 语法：函数对象([实参1,实参2…实参N]);
  fun() sum() alert() Number() parseInt()
  - 当我们调用函数时，函数中封装的代码会按照编写的顺序执行

• 形参和实参
  - 形参：形式参数
  - 定义函数时，可以在()中定义一个或多个形参，形参之间使用,隔开
  定义形参就相当于在函数内声明了对应的变量但是并不赋值，
  形参会在调用时才赋值。

• 实参：实际参数
  - 调用函数时，可以在()传递实参，传递的实参会赋值给对应的形参,
  调用函数时JS解析器不会检查实参的类型和个数，可以传递任意数据类型的值。
  如果实参的数量大于形参，多余实参将不会赋值，
  如果实参的数量小于形参，则没有对应实参的形参将会赋值undefined