JS原型及其原型链（知识点及其面试题）

JS原型及其原型链（知识点及其面试题）

构造函数

//构造函数名 首位大写
function Foo(name,age){
	this.name = name
	this.age = age
	this.class = 'class01'
	//return this //默认执行这一行
}
//当new 这个函数执行的时候  this 变成空对象
var f =  new Foo('小明',25)
var f =  new Foo('小红',24) //创建多个对象

构造函数-扩展

1. var a ={} 其实是 var a = new Object()的语法糖
2. var a =[] 其实是 var a = new Array()的语法糖
3. function Foo(){…} 其实是 var Foo = new Function(…)
4. 使用 instanceof 判断一个函数是否是一个变量的构造函数

原型规则和示例

javascript语言特性中，有很多方面和我们接触的其他编程语言不太一样，比如说.**javascript语言实现继承机制的核心就是prototype**，   而
不是Java语言那样的类式继承。Javascript解析引擎在读取一个Object的属性的值时，**会沿着原型链向上寻找**，如果最终没有找到.则该属
性值为    undefined:如果最终找到该属性的值，则返回结果。与这个过程不同的是，当javascript解析引擎执行“给一个Object的某个属性赋值”的时
候，如果    当前Object存在该属性，则改写该属性的值，如果当前的Object本身并不存在该属性，则赋值该属性的值。

• 所有的引用类型（数组、对象、函数），都是具有对象特性，即可自由扩展属性**（除了 null）**
• 所有的引用类型（数组、对象、函数）,都有一个__proto__ ,(隐式原型)，属性值是一个普通的对象
• 所有的函数，都有一个 prototype 属性，（显式原型）属性值也是一个普通的对象
• 所有的引用类型（数组、对象、函数），proto 属性值指向它的构造函数的 ‘ prototype ’ 属性值
• 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的 proto (即它的构造函数的 prototype) 中寻找

console.log(obj.__proto__===Object.prototype)

//规则第五点
function Foo(name,age){
	this.name = name
}
Foo.prototype.alertName = function(){
	alert(this.name)
}
//创建实例
var f = new Foo('xiaoming')
f.printName = function(){
	console.log(this.name)
}
f.alertName()		// xiaoming
f.printName()		// xiaoming
f.toString()			// 要去f.__proto__.__proto__中查找
//因为 f.__proto__ ⇒  Foo 这个函数对象，但是在这个函数对象中并没有 toString 所以=> 就在Foo的隐式原型去找 Object的__proto__
var item = null;
for(item in f){
//高级浏览器已经在 FOR  IN 中屏蔽了来自原型的属性
// 加上判断，有利于保证程序的健壮性
//hasOwnProperty  是否为私有属性
	if(f.hasOwnProperty(item)){
		console.log(item)		 // name	printName
	}
}

问题一 ：如何准确判断一个变量是数组类型

• instanceof:用于判断 引用类型 属于哪个 构造函数 的方法

var ary = []
ary instanceof Array 	//true
typeof  ary  // object ,typeof 是无法判断是否是数组的
变量 instanceof Array

问题二：写一个原型链继承的例子

• 写一个封装DOM查询的例子

function Elem(id){
	this.elem = document.getElementById(id)
}
Elem.prototype.html = function(val){
	var elem = this.elem;
	if (val) {
		elem.innerHTML = val
		return this
	}else{
		return elem.innerHTML
	}
}
Elem.prototype.on = function(type,fn){
	var elem = this.elem;
	elem.addEventListener(type,fn)
	return this
}
var oDiv = new Elem('id')
oDiv.html('<p>嘟嘟嘟</p>').on('click',function(){
	alert('加油哟')
}).html('<p>嘟嘟嘟</p>')

问题三：描述 new 一个对象的过程

• 创建一个新对象
• this指向这个新对象
• 执行代码，即对this赋值
• 返回this

function Foo(name,age){
	this.name = name
	this.age = age
	this.class = 'class01'
	// return this
}
var f =  new Foo('小明',25)

问题四：zepto(或者其他框架)源码中如何使用原型链

• 阅读源码是高效提高技能的方式

问题五：时间字符串格式化用原型来写

//在string 原型上加个方法
String.prototype.myFormatTime = function myFormatTime(template='{0}年{1}月{2}日 {3}时{4}分{5}秒'){
	//this==> str
	let ary = this.match(/\d+/g).map(item=>(item<10?'0'+item:item));
	return template.replace(/\{(\d)\}/g,(...[,index])=>ary[index])
}
let str = '2019/4/30 17:50:23'
str.myFormatTime()