JS 原型链的终点
从对 js 原型和原型链查找的特性, 我们知道了两个最为重要的结论:
- 函数对象天生存在
prototype属性, 它是一个对象, 而它的constructor属性指回函数自身 - 构造函数的
prototype属性是实例对象的原型, 即 youge.__ proto __ == People.prototype - JS 规定实例可以打点访问原型上的属性和方法, 类似类变量或方法, 即称为
原型链查找
原型链的终点
如上例, 构造函数的的原型 People.prototype 并不是原型链的终点, 它往上还有原型是 Object.prototype
那说明与之对应的还有一个 Object 对象, 即为原型链的终点, 简单演示这段关系就是:
// 类似有 2个构造函数, 一个实例:
Object;
People;
youge;
// 他们端原型链关系是:
youge.__proto__ = People.prototype
People.prototype.__proto__ = Object.prototype
// 最顶端是 Object
Object.prototype 天生存在
还是代码演示吧:
function People(name, age, sex) {
this.name = name
this.age = age
this.sex = sex
}
// 实例化
var youge = new People('油哥', 18, '男')
// 构造函数的原型, 是 Object.prototype
console.log(youge.__proto__ === People.prototype);
console.log(People.prototype.__proto__ == Object.prototype);
// 简写就是
console.log(youge.__proto__.__proto__ == Object.prototype);
// 终点就是 Object, 再往上就是 null 啦
console.log(youge.__proto__.__proto__.__proto__ == null);
true
true
true
true
内置的 Object 是所有对象的构造函数, 构造函数的 prototype 是对象, 那它的原型就是 Object . 从原型链的这个关系, 也就解释了为什么一个实例对象能调用类似 hasOwnProperty() 这样的方法, 因为它已经在 Object.prototype 中定义啦. 在调用时如果发现没有, 会沿着原型链往上查找哦, 如果找了终点都没有找到才最终返回 undefined.
不得不说, 这个 JS 创始人的这个独特的原型设计的精妙, 期初觉得很奇怪, 为啥不直接用类, 因为之前接触的语言大多都是面向对象的那一套东西嘛, 现在用了几年突然回首, 呀这个原型设计真的是巧妙至极呀 !
数组的原型链
在 js 中, 数组其实也是对象, 只不过键为索引而已, 它能让我们更加聚焦在值的观测上.
但注意的是, 所有数组的原型是 Array , 则数组的原型三角关系是:
Array -> Array.prototype -> arr.__proto__
而 Array 的原型也是 Object.prototype .
var arr = []
console.log(arr.__proto__ == Array.prototype); // true
// 数组原型链
console.log(arr.__proto__.__proto__ == Object.prototype); // true
console.log(Array.prototype.hasOwnProperty('push')); // true
console.log(Array.prototype.hasOwnProperty('splice')); // true
console.log(Array.__proto__ == Object.prototype); // false
console.log(Array.__proto__ == Function.prototype); // true
通过原型链实现继承
面向对象三大特性, 封装, 继承, 多态. 那通过原型链呢我们可以实现 继承 的效果.
// 父类
function People(name, age, sex) {
this.name = name
this.age = age
this.sex = sex
}
People.prototype.sayHello = function () {
console.log('hi, 我是: ', this.name + '今年: ', this.age, ' 岁啦!');
}
People.prototype.eat = function () {
console.log(this.name, "开始吃肉肉.");
}
// 子类
function Student(name, age, sex, school, studentNumber) {
// ES6 可以用 super
this.name = name
this.age = age
this.sex = sex
this.school = school
this.studentNumber = studentNumber
}
// 关键语句实现继承
Student.prototype = new People()
Student.prototype.study = function () {
console.log(this.name, ' 正在学习哦!');
}
Student.prototype.exam = function () {
console.log(this.name, ' 正在考试哦!');
}
// 实例话
var youge = new Student('youge', 18, '男', '幼儿园', 123456)
youge.study()
// 能调用父类方法哦, 因为 Student.prototype == new People()
// 子类也能重写父类的 sayHello 方法
youge.sayHello()
youge 正在学习哦!
hi, 我是: youge 今年: 18 岁啦!
发现这个案例, 实现继承的关键一句话是: Student.prototype = new People()
面向对象就简单介绍到这里啦. 总结下来就是, 面向对象的特点是事先对场景进行抽象类, 通过定义不同的类, 再通过类实例话进行程序交互. 它的有点就是可以让程序编写更加清洗, 代码结构更加严密, 使代码更加健壮和方便维护.
但是呢,
我写了一段时间 Java 代码后, 就有点烦这个面向对象了, 写得是真的难受, 感觉还是脚本写起来爽一点呀.
