问题
1.如何准确判断一个变量是数组类型
2.写一个原型链继承的例子
3.描述new一个对象的过程
知识点
构造函数
function Foo (name,age) {
this.name=name
this.age=age
this.class='class-1'
//return this //默认有这一行
}
var f = new Foo('zhangsan',20)
//var f1=new Foo('lisi',22) //创建多个对象
- 构造函数的一个基本特征,函数名首字母大写;
- 通过new可以实例出很多的构造函数出来;构造函数类似于一个模板的机制
构造函数-扩展
var a = {} // 把a赋值成对象,其实是 var a=new Object()的语法糖
var b = [] // 其实是var b=new Array()的语法糖
function Foo () {...} // 其实是var Foo=new Function(...)
// 使用instanceof判断一个函数是否是一个变量的构造函数
//如: 变量 instanceof Array();
- instanceof
用于判断引用类型属于哪个构造函数的方法
所有的引用类型（对象、数组、函数）都有构造函数，a的构造函数是Object()，b的构造函数是Array()，Foo的构造函数是Function()。所以假如想要判断一个变量是否为数组就可以使用
var a = {}
a instanceof Array //false
原型的 5个规则和实例
1: 所有的引用类型(数组,对象,函数),都具有对象的特征,即可自由扩展属性( ' null ' 除外)
var obj = {}; obj.a = 1000;
var arr = []; arr.a = 1001;
function fn () {};
fn.a = 1002;
2: 所有的引用类型(对象,数组,函数),都有一个____proto____(隐式原型)属性,属性值是一个普通的对象
var obj = {}; obj.a = 1000;
var arr = []; arr.a = 1001;
function fn () {};
fn.a = 1002;
console.log(obj.__proto__); // {}
console.log(arr.__proto__); // []
console.log(fn.__proto__); // Function
3: 所有的函数(不包括数组,对象),都有一个 prototype (显示原型)属性,属性值也是一个普通对象
function fn () {};
fn.a = 1002;
console.log(fn.prototype); // fn {}
4: 所有的引用类型(对象,数组,函数)的____proto____属性值指向他的构造函数的 "prototype" 属性值;指向:即完全等于
var obj = {}; // 等于 var obj = new Object();
obj.a = 1000;
console.log(obj.__proto__ === Object.prototype); //true;
//obj的构造函数就是Object;
//Object是一个函数,所以可以有显示原型的属性
5: 当试图得到一个对象(引用类型)的某个属性时,如果这个对象本没有这个属性,那么会去它的____proto____( 即它的构造函数的prototype )中寻找;
var obj={};obj.a=100;
var arr=[];arr.a=100;
function fn(){}
fn.a=100
console.log(obj.__proto__) //{}
console.log(arr.__proto__) // []
console.log(fn.__proto__) // Function
console.log(fn.prototype) // fn {}
console.log(obj.__proto__===Object.prototype) //true
//构造函数
function Foo(name, age) {
this.name = name;
};
Foo.prototype.alertName = function(){
alert(this.name)
};
//实例
var f = new Foo("jiangdeng");
f.printName = function () {
console.log(this.name)
};
//测试
f.printName(); // jiangdeng
f.alertName(); // jiangdeng
补充两个知识点:
- this
通过对象属性的形式执行函数的时候(如下),无论函数是自身的属性还是从原型中得到的属性,这个函数执行的时候这个this永远指向这个对象(f)自身
f.printName(this); //jiangdeng
f.alertName(this); //jiangdeng
- 循环对象的自身属性
//构造函数
function Foo(name, age) {
this.name = name;
};
Foo.prototype.alertName = function(){
alert(this.name)
};
//实例
var f = new Foo("jiangdeng");
f.printName = function () {
console.log(this.name)
};
//测试
f.printName(); // jiangdeng
f.alertName(); // jiangdeng
//查找自身属性的方法
var item;
for (item in f) {
if (f.hasOwnProperty(item)) {
console.log(item)
}
}
// f 自身属性加上原型上的属性一共有三个,分别是:name,alertName,printName;
// 自身属性有name 和 printName
原型链
//构造函数
function Foo(name, age) {
this.name = name;
};
Foo.prototype.alertName = function(){
alert(this.name)
};
//实例
var f = new Foo("jiangdeng");
f.printName = function () {
console.log(this.name)
};
//测试
f.printName(); // jiangdeng
f.alertName(); // jiangdeng
f.toString() //要去f.__proto__.__proto__中查找
所有的引用类型都有__proto__属性，且__proto__属性值指向它的构造函数的 prototype 的属性值，所以当 f 不存在 toString 时，便会在f.__proto__即Foo.prototype中查询，而Foo.prototype中也没有找到toString。由于Foo.prototype也是一个对象，所以它隐式原型__proto__的属性值便指向它的构造函数Object的prototype的属性值。
原型链.png
//试一试
console.log(Object.prototype)
console.log(Object.prototype.__proto__) //为了避免死循环，所以此处输出null
instanceof 的判断逻辑:
1-6-2 instanceof的判断逻辑.jpg
f 的隐式类型一层一层网上找,看能否对应到Foo的显示类型,如果没有找到,再试着去找到Object的显示类型
解题
1.如何准确判断一个变量是数组类型
使用instanceof
var arr=[]
arr instanceof Array //true
typeof arr //object typeof无法准确判断是否是数组
2.写一个原型链继承的例子
//首先定义一个构造函数Animal
//动物
function Animal() {
this.eat = function() {
console.log('animal eat')
}
}
//狗
function Dog() {
this.bark = function() {
console.log('dog bark')
}
}
//Dog构造函数的的显示类型指向 Animal的对象,Animal对象有一个属性eat
Dog.prototype = new Animal();
//哈士奇
var hashiqi = new Dog();
hashiqi.eat;
?:哈士奇有什么属性?Dog本身有bark属性,hashiqi肯定有bark属性;hashiqi.eat能执行,因为他会从Dog的显示类型中去取;Dog的显示类型就是一个new Animal,已经有了eat属性的这么一个对象
注意: 面试的时候千万不要写这个例子,因为会显得特备low;
- 高级例子
//原型继承的实例,封装一个DOM节点查询的例子,然后获取让他的内容,改变内容,绑定节点
function Elem(id) {
this.element = document.getElementById(id);
return this;
}
//扩展原型,在原型上添加一个html的方法,该方法接受一个值val;
Elem.prototype.html = function(val) {
//获取到上面那块儿,然后把它放到变量(ele)里;
var ele = this.element;
//如果获取的元素ele有内容,就赋值成val;如果没值的话,就打印出标签dom结构
if (val) {
ele.innerHTML = val;
return this //为了链式操作
} else {
return ele.innerHTML;
}
}
//扩展一个方法on
Elem.prototype.on = function(type, fn) {
var ele = this.element;
ele.addEventListener(type, fn)
}
var div1 = new Elem('mobile-bar');
//打印目录
//console.log(div1.html());
//修改内容
div1.html('我我想做成一件事,哪怕只是一件');
//添加事件
div1.on('click', function() {
alert('fuck');
})
3.描述new一个对象的过程
function Foo (name,age) {
// this = {}
this.name = name
this.age = age
this.class = 'class-1'
//return this
}
var f = new Foo ('zhangsan',20)
//var f1 = new Foo ('lisi',22) //创建多个对象
创建一个新对象
this指向这个新对象 this={}
执行代码，即对this赋值 this.xxx=xxx
返回this return this
版本2:
-
new一个构造函数返回一个对象的过程:
function Foo(name,age) {
this.name = {}; // this 变成一个空对象
return this;
}
var f = new Foo('jiangdeng');
- 首先new的时候把参数传进去(当然也可以不传),new函数执行的时候构造函数里面的this会变成一个空对象,然后是this.name,this.age开始赋值,赋值完成后,默认把this给return回来;return回来后再赋值给f,f 现在具备了this.name等于'zhangsan'属性