《JavaScript启示录》笔记——head全局对象及this指向问题

一、head全局对象

	/*JS对象必须包含在对象内部。
	Web浏览器环境中编写的JS代码被包含在Window对象内
	window对象一种head对象
	head对象是JS幕后创建用于封装用户自定义代码，容纳预定义原生代码
	*/
	var string = 'string';
	var func = function () {};
	console.log('string' in window);//true
	console.log('func' in window);//true

	/*head对象内的全局函数
		decodeURI()
		decodeURIComponent()
		encodeURI()
		encodeURIComponent()
		eval()
		isFinite()
		isNaN()
		parseInt()
		parseFloat()
	*/

	/*head对象是包含所有对象的对象，
	全局变量、全局属性是直接包含在head对象内的值
	*/
	var test = 'flten';
	var func2 = function () {
		var func3 = function () {
			console.log(test);
		}();
	}
	func2();//flten
	console.log(window.test);//flten

	/*未定义报错
	var test2 = function () {var str = 'flten'};
	var test3 = function () {
		var test4 = function () {
			console.log(str);//undefined
		}();
	}
	test3();
	*/

	/*引用head对象的两种方式：
			1.引用赋予head对象名称(比如window)
			2.全局作用域中使用this关键字
	*/
	var name = 'flten';

	var win1 = window;
	var win2 = this;

	console.log(win1,win2);//window对象,window对象
	console.log(win1.name,win2.name);//flten,flten

	/*head对象是隐式的
		即使显示声明head对象，它也是隐式的
		head对象在作用域链中是最后一个
		显式引用head对象的方式在性能方面代价更高
		如果需要的属性在全局作用域中，只依靠作用域链，避免显示引用head对象，会更快
	*/

	/*效果相同
	var obj = {
		method:function () {
			alert('Coding is fun');
			window.alert('Coding is fun');
		}
	};
	obj.method();
	window.obj.method();
	*/

二、this关键字的指向问题

		var body = {
			name : 'flten',
			age : 22,
			love : 'coding',
			work : function () {return body.love},
			work2 : function () {return this.love}
		}
		console.log(body.work());//coding
		console.log(body.work());//coding

		//this值基于运行时调用函数的上下文
		var obj = 'flten';
		var myObj = { obj : 'coding' };
		var testFun = function () {
			console.log(this.obj);//此处的testFun对象没有obj的属性，在原型链中进行寻找，找到全局变量obj继承
		}
		myObj.testFun = testFun;

		testFun();//flten
		myObj.testFun();//coding

		//除了this,arguments以外的所有变量都遵循词法作用域规则
		
		var test = {
			func1 : function () {
				console.log(this);//func1
				var func2 = function () {
					console.log(this);//windos
					var func3 = function () {
						console.log(this);//window
					}()
				}()
			}
		}
		test.func1();

		/*当this值的宿主函数被封装在另一个函数内部或者在另一个函数的上下文中被调用时
			this值永远指向对head对象的引用
			ES5中this是固定的
		*/
		var test2 = {
			func2 :function (code) {
				code();//window
				console.log(this);//fun2
			}
		}
		test2.func2 (function () { console.log(this) });

		//嵌套函数中，可以利用this保留对父函数的引用
		var objc = {
			myObj : 'Talk is easy,show me the code',
			myMethod : function () {
				var that  = this;//在myMethod保存this引用(objc)
				var temObj = function () {
					console.log(that.myObj);//Talk is easy,show me the code.
					console.log(this);//window
				}();
			}
		}
		objc.myMethod();

		//使用call()或apply()控制this值(改变默认指向)
		var myObj = {};
		var myFun = function (name,age) {
			this.name = name;
			this.age = age;
			console.log(this)
		}
		myFun();//window
		myFun.call(myObj,'flten',22);
		console.log(myObj);//{name:"flten",age:22}
		myFun.apply(myObj,['wall',23]);
		console.log(myObj);//{name:'wall',age:23}

		var Person = function (name) {
			this.name = name;
		}
		var personOne = new Person('flten');
		console.log(personOne.name);//flten
		var personTwo = Person('wall');
		/*报错，undefined，未使用new，
		实际上name值设置到了window.name上
		
		// console.log(personTwo.name);
		*/
		console.log(window.name);//wall

		//原型方法内的this引用构造函数实例
		var Person2 = function (x){
			if(x) {this.fullName = x};
		};
		Person2.prototype.myFullName = function () {
			return this.fullName;
		}
		var person1 = new Person2('flten');
		var person2 = new Person2('wall');
		console.log(person1.myFullName(),person2.myFullName()); //'flten','wall'

		Object.prototype.fullName = 'Dennis';
		Person2.prototype.fullName = 'Ricther';
		
		var person4 = new Person2('cinderella');
		var person3 = new Person2();//未传入参数因此未继承Person2的fullName属性
		console.log(person3.myFullName());//Rithcer 
		console.log(person4.myFullName());//Cinderella