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()
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页