火急火燎一下午的时间,整理出了JS中最核心,面试必考的知识点,原型和原型链。可能不太好理解,但,这是必考题,提起兴致。嗷~~~
一 先抛面试题:
1.如何准确判断一个变量是数组类型
2.写一个原型链继承的例子
3.描述new一个对象的过程
二 知识点:构造函数 原型规则及示例 原型链 instanceof
1. 构造函数:
function Foo (name,age) {
this.name = name
this.age = age
this.class = 'class01'
}
var f = new Foo('xiaoming',20);
this指向空对象、Foo构造函数名首字母要大写
var a = {} , 其实是 var a = new Object()的语法糖
var a = [] , 其实是 var a = new Array()的语法糖
function foo() {},是 var foo = new Function()的语法糖
2. 原型规则及示例(划重点,这五条规则是学习原型链的基础)
a 所有的引用类型(数组、对象、函数)都具有对象特性,即可自由扩展属性
var obj = {}; obj.a = 100
var arr = []; arr.a = 100
var fn = function () {}; fn.a = 100
b 所有的引用类型(数组、对象、函数)都有_proto_属性(隐式原型),属性值是一个普通的对象
console.log(obj._proto_)
c 所有的 函数 都有一个prototype属性(显式原型),属性值是一个普通的对象
console.log(fn.prototype)
d 所有的引用类型(数组、对象、函数)的_proto_属性值指向其构造函数的prototype属性值
console.log( obj._proto === Object.prototype ) // true
e 当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的_proto_属性(即它的构造函数的prototype)中寻找
function Foo (name,age) {
this.name = name
this.age = age
}
Foo.prototype.alertAge = function () { alert(this.age) }
var f = new Foo('xiaoming',20);
f.printName = function () { console.log(this.name) }
执行:f.printName() // 'xiaoming'
f.alertName() // 20
3. 原型链
原型链的原理就是依靠上边提到的5条规则,举例: foo.toString(); 首先会找 foo自身的属性,没有的话就找foo._proto_(隐式原型)(由于 引用类型的_proto_等于构造函数的prototype(显式原型)),所以会找 Foo.prototype。
见图(纯手绘,哈哈哈)
4. instanceof
用来判断引用类型属于那个那个构造函数的方法。
obj instanceof Object 逻辑是:obj._proto_一层一层往上,能否对应到Object.prototype
三 解题:
1.如何准确判断一个变量是数组类型
arr instanceof Array 如果是true,则 arr 是数组
2.写一个原型链继承的例子
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
}
}
var dom = new Elem('1234567id')
dom.html('<p>把id为1234567id的dom内的html替换</p>')
3.描述new一个对象的过程
function Foo (name,age) {
this.name = name
this.age = age
}
var foo = new Foo('zhangsan',20);
过程描述:创建一个新对象 this指向这个新对象 执行代码即对this赋值 返回this
下期预告:作用域 闭包 敬请期待,哈哈哈