JS基础

最新推荐文章于 2024-10-29 21:47:19 发布

原创最新推荐文章于 2024-10-29 21:47:19 发布 · 76 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#prototype

本文详细解析了JavaScript中的原型链工作原理，包括构造函数、原型对象及属性查找流程。同时介绍了with语句的使用方式及其局限性。

原型链


function Person(name){
  this.name = name;
}
Person.prototype.value = 123;
var p = new Person("jay");
p.name;

寻找p的name属性，首先会检索p这个对象的所有属性，找到就返回，如果找不到，就再去找创建这个对象的prototype,一直这样找下去。
比如要找value属性，p.value其实等价于p.__proto__.value


function Person(){

}
Person.constructor;
Person.prototype.constructor;

前者打印的是function Function() { [native code] }，后者打印的是function Person(){}

其实在js中，也是一切皆对象，一般可能会认为Person是个构造函数，其实它是个对象，是Function的对象，如下：


Function.constructor
//打印function Function() { [native code] }
Function.prototype
//打印function Empty() {}
Person.constructor
//打印function Function() { [native code] }
Person.prototype
//Person
//->constructor: function Person(){}
//->__proto__: Object
var Person = function(){};
Person.prototype;
//Object
//->constructor: function (){}
//->__proto__: Object

constructor属性表示创建该对象的构造函数，所以Person.constructor打印出Function，因为Person就是Function的实例

第一次Person.prototype打印Person，我换了一种写法后，打印出Object，我的理解是Function实例默认的prototype都是指向一个Object实例，如果是function Person(){}写法，那这个Object实例的名字就是Person，所以打印出Person，如果是var Person = function(){}写法，实际过程是先创建Function的实例，这是一个匿名实例，然后赋值给Person变量，既然匿名就没有指定的名字，所以默认打印了Object。它有两个属性，constructor指向Person自己，__proto__指向Object对象，这是继承了根类。

奇怪的是：
[img]http://dl.iteye.com/upload/attachment/455392/cd5a221b-8fc4-398e-b9bf-0a8ed11012b8.png[/img]
Person.prototype.constructor指向Person的构造函数，这里却还显示了两个属性：prototype和__proto__。构造函数有prototype是很自然的，但有__proto__说明什么呢？充分说明Person.prototype.constructor是一个实例，因为只有new生成的实例才有这个属性。

使用function定义的对象与使用new操作符生成的对象之间有一个重要的区别：[function定义的对象有一个prototype属性，使用new生成的对象就没有这个prototype属性]

[b]2.with[/b]
with已经不推荐使用了，但了解学习还是有必要的
with具有延长作用域的作用，可以在当前作用域前面再创建一个新的作用域，在里面可以获取指定对象的所有属性和方法，但是他们是只读的。


function buildURL(){
	var qs = '?degug=true';
	with(location){
		var url = href + qs;
	}
	return url;
}

with里面的 href来自location，即可在当前执行环境的变量对象上找到，而qs可在当前函数环境的变量对象上找到，因为with的变量对象是只读的，所以url不会定义在location对象上，而是属于当前执行环境，我承认前面这句是我抄来的，但是我测试过了，并不是完全的只读，如果url换成location原有属性，相当于this.xx = href + qs，还有一点需要说明：如果在with语句里用了var，该变量会自动添加到函数的环境(非原有属性或方法)