js原型链

下面是一道js题目：

[javascript] view plaincopy

function C1(name){
if(name){
this.name = name;
}
}
function C2(name){
this.name = name;
}
function C3(name){
this.name = name || "John";
}
C1.prototype.name = "Tom";
C2.prototype.name = "Tom";
C3.prototype.name = "John";
console.log(new C1().name + "," + new C2().name + "," + new C3().name);

不运行，求答案！^_^，这道题目对于理解js作用域链十分有用，拿出来和大家分享一下

要做出这道题，最重要是理解js中变量在原型链中查找的顺序，
从内到外大致如下：
本地属性 ---> prototype
变量查找顺序：
能在本地属性中找到的绝不去prototype中找

1).先来分析第一个

[javascript] view plaincopy

new C1().name
function C1(name){
if(name){
this.name = name;
}
}
C1.prototype.name = "Tom";

分析：
由于这里没有参数，默认被赋值成了undefined，所以到了if这里就进不去了，因此在C1本地
属性中找不到name这个属性，只能傻逼兮兮的往外找了，又因为C1.prototype.name = "Tom"的
存在，在prototype中找到了name属性，所以最后打印出来的答案是"Tom"

2).接着来分析第二个

[javascript] view plaincopy

new C2().name
function C2(name){
this.name = name;
}
C2.prototype.name = "Tom";

分析：
由于这次还是没有参数，同样默认被赋值成了undefined，于是本地属性name被赋值成了
undefined。于是在查找的时候一下子就查到了name的值为undefined,
因此C2.prototype.name = "Tom"并没有什么卵用，最终答案为undefined

3).最后来分析第三个

[javascript] view plaincopy

new C3().name
function C3(name){
this.name = name || "John";
}
C3.prototype.name = "John";

分析：
同样是没有参数，undefined作为参数进来以后情况变成了这样：
this.name = undefined || "John"，然后结果很明显了本地属性name被赋值成"John"。
接着是从内往外查找，一下子就锁定了本地属性name，此时的值为"John"。
因此C3.prototype.name = "John"同样没有什么用

最后的结果：

这里还有道小菜：

[javascript] view plaincopy

function Foo() {
this.say = function(){
alert('本地方法');
}
}
Foo.prototype.say = function() {
alert('prototype方法');
}
new Foo().say();

总结：

如果原型链上有相同的方法。那么会优先找本地方法，找到并执行，原型链上的方法就不执行了。
同样的，属性的查找也是这么个顺序。

转载于:https://www.cnblogs.com/luckyXcc/p/9160185.html

变量在原型链中的查找顺序相关推荐

js delete删除对象属性，delete删除不了变量及原型链中的变量
js delete删除对象属性,delete删除不了变量及原型链中的变量一.delete删除对象属性 function fun(){this.name = 'gg';}var obj = new f ...
javascript原型链中 this 的指向
为了弄清楚Javascript原型链中的this指向问题,我写了个代码来测试: var d = {d: 40};var a = {x: 10,calculate: function (z) {retu ...
JS原型链中的属性问题
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
JavaScript——原型/原型链中的顶层对象（图解）
本篇需要提前了解的知识储备:原型和原型链,以下仅概要介绍,不作详细讲解. 详细学习可参考: JavaScript--面向对象(封装):https://blog.csdn.net/qq_29493173 ...
js原型链中this
#####原型链中的this是指谁,通过三步确认: 1, 看是谁调用(点之前是谁,就是谁调用) 2, 进行this替换 3, 基于原型链确认结果举例如下: function Pointer(x,y) ...
扩展数组方法给数组原形链追加方法（原型链中的this）
扩展数组方法写在前面 1.关于原型链 1.1 故事的开始,手写index 1.2 故事的矛盾点,数组方法直接给Array原形扩展方法 1.3 又一次悟到了原形链 1.4 故事的高潮,发现问题,返现没 ...
C++中类成员变量在初始化列表中的初始化顺序
引子:我们知道,C++中类成员变量的初始化顺序与其在类中的声明顺序是有关的. 先看代码: 1 class TestClass1 2 { 3 public: 4 TestClass1() { 5 cou ...
JavaScript原型彻底理解2---继承中的原型链
一.继承的概念继承是所有的面向对象的语言最重要的特征之一.大部分的oop语言的都支持两种继承:接口继承和实现继承.比如基于类的编程语言Java,对这两种继承都支持.从接口继承抽象方法 (只有方法签名 ...
前端 JavaScript 原型和原型链
原型模式: 原型模式是用于创建重复的对象,同时又能保证性能,这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式.这种模式是实现了一个原型接口,该接口用于创建当前对象的克隆. 原型模式的目 ...

变量在原型链中的查找顺序

js原型链

1).先来分析第一个

2).接着来分析第二个

3).最后来分析第三个

变量在原型链中的查找顺序相关推荐

最新文章

热门文章