【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记

1. 构造函数和原型

【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记

实例成员和静态成员区别
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
我们希望所有的对象都使用同一个函数,不用单独在开辟内存空间了,这样就比较节省内存。
我们可以把不变的方法定义在prototype原型对象上,这样所有的实例就可以共享这个方法。
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记

一般情况下,我们的公共属性定义到构造函数里面,公共的方法我们放到原型对象身上。
原型是一个对象,可以将我们共享的方法放到原型中,不浪费内存空间实现内存共享。
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记

问题:方法定义在原型对象上面,为什么实例对象可以ldh.sing()使用这个方法?ldh对象身上也没有sing这个方法呀?

在对象身上,系统自动添加一个__proto__指向我们构造函数的原型对象,这样我们就可以使用singf方法。

【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
方法的查找规则:首先看实例对象身上是否有sing方法,如果有就执行对象上的sing方法,如果没有的话,因为有__proto__的存在,就去构造函数原型对象prototype身上去查找sing这个方法。

注意区别原型对象prototype和对象原型__proto__


【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
原型对象与对象原型中都含有constructor属性,很多情况下,我们需要手动的利用constructor这个属性指回原来的构造函数。

当我们要给原型对象的方法过多的时候,我们可以不采用
Star.prototype.sing = function() {}的方法,
我们可以采取Star.prototype = { sing: functiong() {} , …} 的方法,这时我们修改了原来的原型对象,必须手动的利用constructor指回原来的构造函数。使用对象这种方法的时候,会覆盖原来的方法!!切记!!

【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记


【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记

【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
只要是对象里面都有一个原型__proto__,
故查找机制是,先查找ldh实例对象上面是否有这个成员,没有在去查找Star原型对象上面去找,还没有就去Objcet的原型对象上面找,还找不到就返回Null

【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记


【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
this指向问题只有调用的时候才知道指向谁。
在构造函数中,里面this指向的是实例对象ldh
原型对象里面的this指向的是实例对象ldh


这样就可以理解,内置对象里面提前准备好的内置对象方法,也可以对原来的内置对象进行扩展自定义方法。
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
注意:数组和字符串内置对象不能给原型对象覆盖操作Array.prototype = {},只能是Array.prototype.xxx = functiong() {} 的方式


2. 继承

ES6之前并没有给我们提供extends继承。我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承

【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记

现在我们就可以使用call()方法来继承父类了

继承属性:
可以直接在Son中让Father调用call()
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记

【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
继承方法
不可以用父类的原型对象去覆盖子类的原型对象,如果这样的话修改子类的原型对象时,父类的原型对象也会发生改变,与复杂数据类型的存储方式有关,只是复制了父类的原型对象的地址。
故采用给子类的原型对象赋值父类的实例对象
Son.prototype = new Father()
在用子类调用父类的方法时,会去父类的原型对象上面寻找
用对象的方式修改了子类的原型对象,别忘了使用constructor指回原来的构造函数
Son.prototype.constructor = Son
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记


3. ES5中新增的方法

【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记


数组方法
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
forEach()方法

类似JQuery中的each方法
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
filter()方法
返回数组

【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记

some()方法

常用于检测数组中的元素是否满足指定条件,返回布尔值
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记


字符串方法

trim()方法
去除字符串两端的空白字符
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
对象方法

keys()方法
获取对象所有的属性名,并返回一个数组
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记

defineProperty() 方法

【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记
【javaScript高级】构造函数和原型,继承,ES5中新增方法学习笔记