面试 | JS高级---原型到原型链(一看就懂)

文中关于一些概念说了可能三到四边,或者更多,希望是加深大家的印象,希望理解,重要的概念说三遍,只要你能理解,我啰嗦五次都愿意。

构造函数创建对象

==========咱们先来一个栗子=======

function Person(name){    
	//构造函数
	this.name=name; 
} 
Person.prototype.printName=function( ){   
	//原型对象
	alert(this.name); 
} 
var person1=new Person('ming');  //实例化对象
console.log(person1.__proto__);  //这里自己打印一下,印象更深刻
console.log(person1.constructor);//
console.log(Person.prototype);
var person2=new Person('Frank');


//打印的结果

// {printName: ƒ, constructor: ƒ}
// ƒ Person(name){    
	//构造函数           
	// this.name=name; 
}
// {printName: ƒ, constructor: ƒ}

person1.__proto__ == Person.prototype  // true
 
   (注意这里的大小写)Person的实例person1中包含了name属性,同时也自动生成一个__proto__属性,该属性指向Person的prototype,可以访问到prototype内定义的printName方法,大概就  是这个样子的:每个JavaScript函数都有prototype属性,这个属性引用了一个对象,这个对象就是**原型对象**。**原型对象初始化的时候是空的**,我们可以在里面自定义任何属性和方法,这些方法和属性都将被该**构造函数**所创建的对象**继承**。(下一篇我会更详细的介绍原型,很暴力的)

实例是通过构造函数创建的。实例一创造出来就具有constructor属性(指向构造函数)和proto属性(指向原型对象),

构造函数中有一个prototype属性,这个属性是一个指针,指向它的原型对象

原型对象内部也有一个指针(constructor属性)指向构造函数:Person.prototype.constructor = Person;

实例可以访问原型对象上定义的属性和方法。

在这里person1和person2就是实例,prototype是他们的原型对象。

function 才有prototype  ,原型对象有__proto__

//========再来一个栗子===========

function Animal(name){    //构造函数

    this.name = name; //设置对象属性
}

Animal.prototype.behavior = function() {  

    console.log("this is a "+this.name);

}
var Dog = new Animal("dog");
var Cat = new Animal("cat");

Dog.behavior();//通过Dog对象直接调用behavior方法  // "this is a dog"

Cat.behavior(); //"this is a cat"

console.log(Dog.behavior==Cat.behavior);// true;

//总结:构造函数的prototype上定义的方法确实可以通过对象直接调用到,而且代码是共享的。prototype属性指向Animal对象。

================= 开始正题 ==================

-1-Prototype:

每个函数都有一个prototype属性,也只有函数有该属性。

function Person(){ }

Person.prototype.name = 'name';

var person1 = new Person();

var person2 = new Person();

console.log(person1.name) // name

console.log(person2.name) //name

问:那这个函数的prototype属性到底指向的是什么呢?是这个函数的原型吗?

|    |
|    |

总结:函数的prototype属性指向了一个对象,这个对象正是调用该构造函数而创建的实例的原型,也就是这个例子中的person1和person2的原型。

问:什么是原型?每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型”继承”属性。

-2-proto

怎么表示实例与实例原型,也就是person和Person.prototype之间的关系呢,这时候我们就要讲到第二个属性:

proto。每一个JavaScript对象(除了null)都具有的一个属性,叫proto,这个属性会指向该对象的原型。

function Person( ){

}

var person = new Person();

console.log(person.__proto__ === Person.prototype); //true

问:既然实例对象和构造函数都可以指向原型,那么原型是否有属性指向构造函数或者实例呢?

-3-  constructor

没有指向实例的,因为一个构造函数可以生成多个实例,但是原型指向构造函数是有的,这就要讲到第三个属性:construcotr,每个原型都有一个constructor属性指向关联的构造函数

为了验证这一点,我们可以尝试:

function Person() {

}

console.log(Person === Person.prototype.constructor); //true

精华----综上总结:(看清大下写)

function Person() {  //构造函数

}

var person = new Person(); //实例对象 

console.log(person.__proto__ == Person.prototype) //true

console.log(Person.prototype.constructor == Person) //true // 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) //true

实例与原型

当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。

======举个例子:=========

function Person() {

}

Person.prototype.name = 'name';

var person = new Person();

person.name = 'name of this person';

console.log(person.name) // name of this person

delete person.name;

console.log(person.name) // name

我设置了person的name属性,所以我可以读取到为’name of this person’,当我删除了person的name属性时,读取person.name,从person中找不到就会从person的原型也就是person.proto == Person.prototype中查找,幸运的是我们找到了为’name’,但是万一还没有找到呢?哪原型的原型又是什么呢?

在前面,我说过原型也是一个对象,既然是对象,我就可以用最原始的方式创建它,那就是

var obj = new Object();//字面两创建对象new一个

obj.name = 'name';

console.log(obj.name) // name

所以原型对象是通过Object构造函数生成的,结合之前所讲,实例的proto指向构造函数的prototype,

原型链

问:Object.prototype的原型是什么?

null,嗯,对就是null,所以查到Object.prototype就可以停止查找了

补充,最后,补充和纠正本文中一些不严谨的地方:

首先是constructor,

function Person() {

}

var person = new Person();

console.log(person.constructor === Person); // true

当获取person.constructor时,其实person中并没有constructor属性,当不能读取到constructor属性时,会先从person的原型也就是Person.prototype中读取,正好原型中有该属性,所以

person.constructor === Person.prototype.constructor

后续补充

经典面试题目

//有关原型与原型链的面试题目
{
	function Fn(){
		this.x = 100;
		this.y = 200;
		this.getX = function () {
			console.log(this.x);
		}
	}
	Fn.prototype.getX = function () {
		console.log(this.x);
	};
	Fn.prototype.getY = function () {
		console.log(this.y);
	};
	var f1 = new Fn;
	var f2 = new Fn;
	console.log(f1.getX === f2.getX);	//false
	console.log(f1.getY === f2.getY);	//true
	console.log(f1.__proto__.getY === Fn.prototype.getY);	//true
	console.log(f1.__proto__.getX === f2.getX);		//false
	console.log(f1.__proto__.getX === Fn.prototype.getX);	//true
	console.log(f1.constructor);	//Fn
	console.log(Fn.prototype.__proto__.constructor);	//Object
	f1.getX();	//100	this=>f1
	f1.__proto__.getX();	//undefined 	this=>f1.__proto__(Fn.prototype)
	f2.getY();	//200	this=>f2
	Fn.prototype.getY();	//undefined	this=>f2.__proto__(Fn.prototype)
}
// false,true,true,false,true,Fn,Object,100,undefined,200,undefined
// 原型、原型链
{
	function fun(){
		this.a = 0;
		this.b = function(){
			console.log(this.a);
		}
	}
	fun.prototype = {
		b: function(){
			this.a = 20;
			console.log(this.a);
		},
		c: function(){
			this.a = 30;
			console.log(this.a);
		}
	}
	var my_fun = new fun();
	my_fun.b();	//私有方法	this=>my_fun
	console.log(my_fun.a);
	my_fun.c();	//公有方法	this=>my_fun this.a = 30(将私有属性a修改为30)
	console.log(my_fun.a);
	var my_fun2 = new fun();
	console.log(my_fun2.a);
	my_fun2.__proto__.c();	//this=>my_fun2.__proto__ 当前实例通过原型链在类的共有属性上增加了一个a:30
	console.log(my_fun2.a);
	console.log(my_fun2.__proto__.a);
}
// 0,0,30,30,0,30,0,30

猜你喜欢

转载自blog.csdn.net/zhan_lijian/article/details/84661970