一, 原型链:
1. 原型对象:
每一个构造函数都有一个 prototype 属性, 这个属性就叫原型对象.
每一个构造函数 new 出来的对象都有一个 --proto-- 属性, 这个属性指向原型对象.
- <script>
- function Car(){
- // 实例属性:
- //this.produce = 'chevrolet',
- this.price = 8800000;
- }
- // 原型属性:
- Car.prototype.produce = "BMW";
- var chevrolet = new Car();
- console.log(chevrolet.produce,chevrolet.price);//BMW 8800000
- console.log(chevrolet==Car.prototype);//false; 构造函数 new 出来的对象和构造函数的原型对象不是同一个对象.
- console.log(chevrolet.produce==Car.prototype.produce);//true;
- /* 构造函数 new 出来的对象和构造函数的原型对象不是同一个对象, 为什么构造函数 new 出来的对象能获取到构造函数原型对象的
- 属性: 因为每一个构造函数 new 出来的对象都有一个 --protot-- 原型链, 该原型链可以把 new 出来的对象和原型对象连接在一起.
- */
- </script>
2. 原型链
- <script>
- // function Car(){
- // // 实例属性:
- // this.produce = 'chevrolet',
- // this.price = 8800000;
- // }
- // var chevrolet = new Car();
- // console.log(chevrolet.produce,chevrolet.price);//chevrolet 8800000
- // function Car(){
- // // 实例属性:
- // // this.produce = 'chevrolet',
- // this.price = 8800000;
- // }
- // // 原型属性:
- // Car.prototype.produce = "BMW";//prototype 相对于构造函数而言, 写法: 构造函数名. prototype. 属性
- // var chevrolet = new Car();
- // console.log(chevrolet.produce,chevrolet.price);//BMW 8800000
- // function Car(){
- // // 实例属性:
- // this.produce = 'chevrolet',
- // this.price = 8800000;
- // }
- // // 原型属性:
- // Car.prototype.produce = "BMW";
- // var chevrolet = new Car();
- // console.log(chevrolet.produce,chevrolet.price);//chevrolet 8800000 原型链的解析过程: 先找实例属性, 再找原型属性.
- function Car(){
- // 实例属性:
- //this.produce = 'chevrolet',
- this.price = 8800000;
- }
- // 原型属性:
- // Car.prototype.produce = "BMW";
- var chevrolet = new Car();
- Object.prototype.produce = 'Audi';
- console.log(chevrolet.produce,chevrolet.price);//Audi 8800000
- // 原型链的解析过程: 先找实例属性, 再找原型属性, 若实例属性和原型属性都不存在, 则找 Object 的原型属性.
- </script>
图解原型链:
二, 作用域链:
解析作用域: 全局作用域, 局部作用域.
- <script>
- var num = 10;
- function fn(num){
- num = 20;
- }
- fn();
- console.log(num);//10
- // 向上查找, 在函数体内找到同样的变量, 操作的就是局部, 否则是全局.
- // 题解: 1. 找 var,fn-->2. 逐行解析代码: 全局变量 num; 遇到函数跳过; 调用函数, 解析函数体: 变量 num 向上查找, 在函数体内
- // 找到形参 num, 所以此处 num 是局部变量, 因此输出结果为全局变量 num=10.
- </script>
- <script>
- var num = 10;
- function fn(){
- num = 20;
- }
- fn();
- console.log(num);//20
- // 题解: 1. 找 var,fn-->2. 逐行解析代码: 全局变量 num; 遇到函数跳过; 调用函数, 解析函数体: 变量 num 向上查找, 在函数体内
- // 没有找到 num, 继续在全局范围内找, 找到全局变量 num, 并将 num=20 赋值于全局变量, 因此输出结果为全局变量 num=20.
- </script>
- <script>
- var num = 10;
- function fn(){
- var num = 20;// 在函数体内部使用 var 明确定义的变量是私有变量.
- }
- fn();
- console.log(num);//10
- // 题解: 函数调用后, 函数体内的变量会被销毁, 所以输出结果 10.
- </script>
三, 原型链和作用域链的区别:
原型链: 原型链作用在构造函数上, 原型链操作的是构造函数的属性: 实例属性和原型属性;
作用域链: 作用域链作用域普通函数上, 操作的是全局变量和局部变量.
来源: http://www.bubuko.com/infodetail-2950622.html