JavaScript-原型与原型链详解

原型与原型链

原型

• 每个class(类) 和函数都有一个显示原型 prototype 存放函数 或 类的公用方法和属性
• 每一个实例都有一个隐式原型 __proto__
• 实例的 __proto__ 指向的是对应函数 或 类的 显示原型 prototype

原型链

• 获取对象的属性 或 方法时，先查找对象自身的属性和方法，如果找不到
• 则去查找隐式原型 __proto__ 中的属性 或 方法
• 如果再次查找不到，就继续向上查找 __proto__ 的 __proto__ 直到倒找 或 null为止，返回undefined
• 把有__proto__组成的链条关系称为原型链
• js对象通过__proto__原型链实现了继承

function Person(name,age) {
	this.name = name;
	this.age = age;
	// this.say = function() {
	// 	console.log("大家好我是：" + this.name + "今年" + this.age);
	// }	
	// 这个say方法时一个公用方法，所以可以使用原型，加载到隐式原型__proto__上
}
// 这个被加载到了__proto__ 隐式原型上了
Person.prototype.say = function() {
	console.log("大家好我是：" + this.name + "今年" + this.age)
}
var p1 = new Person("小站",18);		// new  实例化对象
console.log(p1)		// Person {name: "小刚", age: 11}
console.log(p1.age)		// 18
console.log(p1.name)		// 小站
console.log(p1.say())		// (大家好我是：小站今年18)  undefined
// 因为原型链的原因，先去查找p1实例中的显示原型prototype中的方法，没找到，say方法
// 去找隐式原型__proto__中的方法，发现找到了，say方法 这种一层一层找的关系就是原型链的

列子 —思考—indexOf()

var str = "i love you";
str.indexOf("o");	// 为什么一个字符串会有indexOf方法？？
console.log(str.__proto__);		// 我们查找隐式原型__proto__,发现了很多方法，indexOf方法也在里面

列子—给每个字符串实例添加一个翻转方法 reverse

// 给所有的String都自定义添加一个让字符串翻转的方法reverse
String.prototype.reverse = function() {
	return this.split("").reverse().join("");
}
// 例子
var str = "I love you";
str.reverse();		// "uoy evol I"

例子—思考—

• 执行 Object实例公用方法 toString this为 []

Object.prototype.toString.call([]);

例子—思考—Vue中挂载全局的axios

• 给vue的所有实例和组件 添加一个$Axios方法
• 在组件内部
• this.$Axios.get();
• this指向的vue的实例 就可以通过 this.$Axios在每个组件都可以使用这个公用方法

// 定义时
Vue.prototype.$Axios = axios;
// 访问时
this.$Axios...

判断 对象类型

• typeof
• Object.prototype.toString.call() 最准确
• instanceof 用法：变量 instanceof 对象
  • 是否为XXX实例，如果在原型链__proto__ 有右侧对象就返回true
• constructor 构造函数
  • eg: p1.constructor === Person // true
• isArray 判断是否为数组