您的位置：首页 > Web前端 > JavaScript

Javascript基础知识体系化学习总结（二）原型和原型链

2020-06-05 05:36 507 查看

Javascript基础知识体系化学习总结（二）原型和原型链
一、class
1.首先是讲一下class，其实大部分语言都是利用class来继承而js是基于原型来继承，当然ES6中是对原型继承进行了一定的封装，所以可以用class来继承，但是要记住这个本质上还是基于原型继承的！
2.ES6中class继承比较简单，基本的语法就是：

class 类名 {
constructor () { // 括号中可以传一些参数
// 在这里定义类的属性
}
get () { // 定义方法
// 方法的具体实现
}
}

二、继承
1.继承的话主要是extends继承对应的父类，重点要记住在子类的构造函数即constructor中写super（）方法，来调用父类的构造函数，最好是利用这个方法而不是直接放复制，这样子可以做到父类的构造函数有变动的话我这边子类继承自父类的构造函数也能跟着自动修改。
2.这是对应的继承实现，需要注意的是如果父类构造函数有参数，我们需要在super中体现。

class cat extends Animals {
constructor (父类的参数,自己需要的参数) {
super(父类的参数) // 使用父类的构造函数
// 自己的属性
},
methods () {
// 实现自己的方法
}
}

三、原型
1.前面有提到过原型，那么什么是原型？原型主要分为显示原型prototype和隐式原型__proto__，每次我们定义class的时候我们的方法都会被自动的放到显示原型上，实例化的时候会有对应的隐式原型，实例的隐式原型指向对应类的显示原型。换句话说，显示原型上存放的是我们的方法，通过隐式原型来指向对应的显示原型。
2.具体的执行规则是先在实例自身查找是否有这个属性或者方法，如果没有则通过实例的隐式原型指向的对应class的显示原型上的方法，找到了就执行，如果找不到继续往上一级寻找。

四、原型链
1.原型链就是将显示原型和隐式原型的指向问题，每个class中的prototype其实还有一个__proto__指向下一个prototype（即父类的显示原型），那么实例与对应的类，子类与父类就形成一个链状的关系。
2.原型链上最顶层是Object和它的显示原型prototype，它显示原型上的隐式原型__proto__的指向是null即不能再往上指了。
3.另外实例还有一个hasOwnProperty（对应的方法/属性）的方法来判断这个属性/方法是不是属于本身的方法（如果flase那就是来自原型链上的了）。

五、instanceof与手写简易Jquery
1.这个instanceof是来判断变量属于什么类型或者实例属于哪一个类，主要的原理是上面提到的原型和原型链，比如 a instanceof Array 就是在a的原型链上查找有没有这个Array的原型，找到即返回true，找不到就是false了。
2.手写简易jquery（具体的可以查看我之前的博客）：

<!DOCTYPE html>
<html>
<head>
<title>手写简易的jquery</title>
</head>
<body>
<div>
<p>信仰圣光吧！</p>
<p>js基础体系回顾</p>
</div>
<script type="text/javascript">
class jquery {
constructor (selector) {
console.log(this)
const result = document.querySelectorAll(selector) // 拿到对应元素的集合NodeList(2) [p, p]
console.log(result)
console.log(this)
const length = result.length // 拿到集合的长度
for (let i =0;i<length;i++) { // 循环集合赋值/挂载到jquery上
this[i] = result[i]
console.log(this)
console.log(this[i])
console.log(result[i])
}
this.length = length
this.selector = selector  // 并且添加两个属性
}
get (index) {
return this[index]
}
each (fn) {
for(let i =0;i<this.length;i++) {
const item = this[i]
fn(item)
}
} // 定义两个小方法
}
const $p = new jquery('p')
const obj1 = {}
const obj2 = {a:1}
console.log(obj1,obj2);
</script>
</body>
</html>

好了，javascript的第二个模块大概就是这些内容了，我会将它分为11个模块然后13篇文章左右把它讲完（有的模块内容多会范围上下期大概。。。），学完这些模块相信大家对基础的js会有一个比较体系化的认识，那么大家加油，我是O5,我们下次见！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航