原型以及原型链的学习

一 原型：

定义：原型是function对像的一个属性，他定义了构造函数制造出的对象的公共祖先；

1.经过该构造函数产生的对象，能够继承该原型的属性和方法。 原型也是对像。prototype；

Person.prototype.name = 'jams';
		function Person(){
		}
		var person = new Person();
复制代码

2.当打印：console.log（person.name）时，会先从函数中找看下有没有这个属性值，若是没有就去原型prototype中找；

所以，这时候打印出来的值为：jams

• prototype 是函数对象默认的属性，能够增删改查；

• 利用原型特色和概念，能够提取共有属性；

3.对象如何查看原型——>隐式属性：proto

proto 中存放的就是构造函数的原型

至关于：在函数中隐藏了一段代码：

var  this = {

		__proto__: Person.prototype

		} 
复制代码

举个例子：

var obj = { name: 'a'}

		var obj1 = obj;

		 obj = {name : 'b'}

		console.log(obj1.name);// 输出的值为 a 

		console.log(obj.name);// 输出的值为 b 
 		对比：

 		var obj = { name: 'a'}

		var obj1 = obj;

 		 obj.name ='b'

		console.log(obj1.name);// 输出的值为 b 

		console.log(obj.name);// 输出的值为 b 
复制代码

缘由： 当你修改obj.name 时，修改的是原型中的值，当你从新附值给obj时（obj={name:'b'}）,至关于从新定义了obj这个变量；

换个理解方式为，obj.name 是一个指针，而obj 是一个变量；

4.对象如何查看对象的构造函数：constructor；

constructor 是默认自带的一个属性，他的值指向原函数；

二 原型链：

1.如何构成原型链： 一级一级往上找；

举个例子：

Grand.prototype.lastName = 'a';
		function Grand(){		
		} 
 		var grand = new Grand();
		Father.prototype = grand;
		function Father() {
		this.name =  ' b '; 
		} 
	    var father = new Father(); 
 		Son.prototype = father;
		function Son(){
              this.hobbit = 'smoke';
		}
		var son = new Son(); 
 		console.log( son.name );  // b
		console.log(son.lastName); // a
复制代码

2.原型链上属性的增删改查：跟原型上的增删改查基本一致，其中删除：delete 只能经过原型prototype 才能删除原型的值；

Person.prototype = {
		name = 'a',
		sayName : function(){
 			console.log(this.name);
			} 
		}
		function Person(){ 
		 	this.name = 'b';
		} 
 		var person = new Person();
复制代码

sayName 里面的this指向是，谁调用的这个方法，this指向谁；

• 因此最终结果person.sayName() 的值为b

• 而Person.prototype.sayName() 的值为a

3.绝大多数对象的最终都会继承自Object.prototype

但不是全部的对象均可以继承，特例：Object.creat()原型； 例如：object.creat（null） ，该对象没有prototype原型；

4.原型链的重写： 例如常见的以下原型链就是常常被重写试用的，固然本身定义的原型一样也是能够被重写

Object.prototype.toString
Number.prototype.toString
Array.prototype.toString
Boolean.prototype.toString
String.prototype.toString 
复制代码

三 call、apply call、apply的做用：能够借助别人的函数实现本身的功能 call 能够该表this指向 例如：

function Person(name,age){
 //this == obj；
this.name = name;
this.age = age; 
} 
var person = new Person( 'a' ,100);
var obj = {}
 
Person.call(obj, 'b' ,300);
复制代码

这句话的意思就是调用Person的方法，而后将相关值附值给obj，使得obj有相关参数属性值； 执行结果：obj

{name: "b", age: 300}
//这样的好处，借用Person的方法来封装了obj； 
复制代码

例如：

function Person(name,age,sex){
	this.name  =  name;
	this.age = age;
	this.sex = sex; 
} 
function otherInformation(tel,grade){
	this.tel = tel;
 
	this.grade = grade; 
} 
function Student(name,age,sex,tel,grade) {
	Person.call(this,name,age,sex);
	//欢迎加入全栈开发交流圈一块儿学习交流：864305860
	otherInformation.call(this,tel,grade)
}  //面向1-3年前端人员
var student = new Student('asd',123,'male',129,2018) ;
   //帮助突破技术瓶颈，提高思惟能力
// 输出结果：
Student {name: "asd", age: 123, sex: "male", tel: 129, grade: 2018}
复制代码

call与apply的区别：后面传的参数形式(或者传参列表)不一样； apply 只能传两个参数，一个是this，另外一个是数组，例如：

Person.apply(this,[name,age,sex]);
复制代码

结语

感谢您的观看，若有不足之处，欢迎批评指正。

本次给你们推荐一个免费的学习群，里面归纳移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同窗，欢迎加入Q群：864305860，无论你是小白仍是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时天天更新视频资料。 最后，祝你们早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。