js总结-原型

原型和原型链

和原型对比起来，构造函数（类）式继承有什么不一样呢？首先，构造函数继承的方法都会存在父对象之中，每一次实例，都回将funciton保存在内存中，这样的做法毫无以为会带来性能上的问题。其次类式继承是不可变的。在运行时，无法修改或者添加新的方法，这种方式是一种固步自封的死方法。而原型继承是可以通过改变原型链接而对子类进行修改的。另外就是类式继承不支持多重继承，而对于原型继承来说，你只需要写好extend对对象进行扩展即可

构造函数

//构造函数尽量用大写字母开头
function Foo(name , age){
this.name = name
this.age = age
this.class = 'class-1'
//return this   // 默认有这一行
}
var f = new Foo('zhang' , 19)
var f1 = new Foo('li' , 20) //创建多个对象

构造函数-扩展

var a ={}//等用于
var a = new Object()

var a = []
var a = new Array()

function Foo(){}
var Foo = new Function()

使用instanceof判断一个函数是否是一个变量的构造函数

原型规则和示例

var obj = {}; obj.a = 100;
var arr = []; arr.a = 100;
function fu(){}  fu.a = 100;

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

1、所有的应用类型都具有对象属性，即可自由扩展属性，除了null

2、隐式原型：所有的引用类型，都有一个__proto__属性,属性值是一个普通的对象

3、显式原型：所有的函数都有prototype属性，属性值也是一个普通对象

4、所有的引用类型，proto 属性是指向其构造函数的‘prototype’属性值

5、当试图得到一个对象的某个属性时，如果对象本身没有这个属性，那么会去他的 proto （即构造函数prototype）中寻找

//第五条示例
function Foo(name, age){
this.name = name
}
//显示原型
Foo.prototype.alertName = function(){
alert(this.name)
}
//创建示例
var f = new Foo('dong')
f.printName = function(){
console.log(this.name)
}
//测试
f.printName()   //dong
f.alertName() //alert dong
//alertName 到f中招没有，去Foo

循环对象自身的属性

//f自身：name ， printName
//不屏蔽原型的话则是三个 name printName alertName
var item
for (item in f){
//高级浏览器已经在for in 中屏蔽了来自原型的属性，但是加上一下判断保证程序的健壮性
if (f.hasOwnProperty(item)) {
console.log(item)
}
}

原型链

接上代码：
f.toString() // f.proto.proto 中查找
自身的隐式原型即构造函数的显示原型
即f -隐式> Foo -显> prototype -隐>.proto

instanceof

f instanceof Foo的判断逻辑
f的 proto 一层层往上，能否对应到Foo.prototype
在判断f instanceof Object

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

var arr = []
arr instanceof Array //true
typeof arr //object,  typeof是无法判断的

原型链继承的例子

//动物
function Animal(){
this.eat = function(){
console.log('animal.eat')
}
}
//够
function Dog(){
this.bark = function(){
console.log('dog.bark')
}
}
Dog.prototype = new Animal()
//哈士奇
var hashiqi = new Dog()

封装DOM查询 -> 原型链继承的例子

function Elem(id){
this.elem = document.getElementById(id)
}
Elem.prototype.html = function(val){
var elem = this.elem
if (val) {
elem.innerHTML = val
}else{
return elem.innerHTML
}
}
Elem.prototype.on = function(type, fn){
var elem = this.elem
elem.addEventListener(type,fn)
}

var div1 = new Elem('div1')
//console.log(div1.html())
div1.on('click', function(){
alert('clicked')
})

new一个对象的过程

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