关于一道面试题

var foo,bar1,bar2;
function Foo(){
    this.counter={i:0};
    this.counter2=0;
}
function Bar(){};
foo=new Foo();
Bar.prototype=foo;
Bar.prototype.sayHello=function(){
    console.log(this.counter.i,this.counter2);
    this.counter.i+=1;
    this.counter2+=1;
}
var bar1=new Bar();
var bar2=new Bar();
foo.sayHello();
bar1.sayHello();
bar2.sayHello();
foo.sayHello();

一眼瞟过,大概的意思是:

声明了3个变量:foo,bar1,bar2; 

接着声明了2个构造函数:Foo,Bar; 

接着构造函数Foo的实例对象(new Foo)赋值给foo这个变量,

接着foo这个变量又赋值给构造函数Bar的原型,即Bar.prototype; 

接着在构造函数Bar的原型上添加了一个sayHello的方法;

接着构造函数Bar的实例对象赋值给变量bar1

接着构造函数Bar的实例对象赋值给变量bar2

接着执行foo.sayHello();

接着执行bar1.sayHello();

接着执行bar2.sayHello();

接着执行foo.sayHello();

//其中bar.prototype = foo就是对象引用  同时bar也继承了foo的所有属性和方法

Bar.prototype.counter2=10;//修改Bar原型上的属性 counter2 =10;原本是 0;

console.log(foo.counter2);//Foo的实例对象foo下面的counter2 却跟着同时 变成10了

第一个foo.sayHello()执行的结果:

执行第一个foo.sayHello()的时候,因为console.log(this.counter.i,this.counter2)在 this.counter.i+=1;this.counter2+=1;前面,用的值自然就是初始值this.counter={i:0};this.counter2=0;
第一个foo.sayHello()执行的结果就是 0 0

bar1.sayHello()执行的结果:

执行bar1.sayHello()时,由于已经执行过foo.sayHello(),引用地址中的变成 this.counter={i:1}; this.counter2=1;因此执行结果就是 1,1

bar2.sayHello()执行的结果:

执行bar2.sayHello()时,由于已经执行过foo.sayHello()由于是bar2又是一个实例化对象,由于每次实例化时,构造函数里的基本数据类型也会被初始化(this.counter2=0),复合数据this.counter不会被初始化({i:2});因此执行bar2.sayHello()的结果:2 1

第二个foo.sayHello()执行的结果:

执行第一个foo.sayHello()后,foo实例下的属性已经变成this.counter={i:1} this.counter2=1,经过bar1.sayHello()和bar2.sayHello()的执行,改变了只是复合属性this.counter的i值,而this.counter2是基本数据类型,不会影响到,因此,执行第二个foo.sayHello(),由于this.counter={i:3} this.counter2=1,结果就是 3 1

 ps:

基本类型和引用类型的值及使用有什么区别？

此处主要考察ECMAScript变量包含的两种不同数据类型的值：
- 基本类型值， 指的是简单的数据段
- 引用类型值， 指的是那些可能由多个值构成的对象

解析过程有什么不同？

答：将一个值赋给变量时，解析器必须确定这个值是基本类型值（Undefined，Null，Boolean，String，Number），还是引用类型值。
基本数据类型是按值访问的，因为可以操作保存在变量中的实际的值
引用类型的值是保存在内存中的对象，与其他语言不同，JavaScript不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。在操作对象时，实际上是操作对象的引用而不是实际的对象，为此，引用类型的值是按引用访问的。注意JS中，Sring不是引用类型

基本类型与引用类型对动态属性的支持的区别有哪些？

答：定义基本类型值和引用类型值的方式是类似的：创建一个变量并为该变量赋值
当这个值保存到变量之后，对不同类型值可以执行的操作则大相径庭。对于引用类型的值，我们可以为其添加属性和方法，也可以改变和删除其属性和方法，例如：
var person = new Object();
person.name = "Jack";
console.log(person.name); // "Jack"
以上代码创建了一个对象并将其保存在了变量person中。
我们不能给基本类型的值添加属性，尽管这样做不会导致任何错误（严格模式下会报错）
var name = "Jack";
name.age = 27;
console.log(name.age);   // undefined
通过上述例子，表明只能给引用类型值动态地添加属性

var fullname="Joh Don";
var o={
    fullname:'colin Ihrig ',
    prop:{
        fullname:'Aureio De Rose ',
        getFullname:function(){
            return (()=>this.fullname)()
        }
    }
}


console.log(o.prop.getFullname())//Aureio De Rose 
var test=o.prop.getFullname;
console.log(test())//Joh Don

var fullname="Joh Don";
var o={
    fullname:'colin Ihrig ',
    prop:{
        fullname:'Aureio De Rose ',
        getFullname:function(){
            return (function(){return this.fullname})()
        }
    }
}

console.log(o.prop.getFullname())//Joh Don
var test=o.prop.getFullname;
console.log(test())//Joh Don

var fullname="Joh Don";
var o={
    fullname:'colin Ihrig ',
    prop:{
        fullname:'Aureio De Rose ',
        getFullname:function(){
            return this.fullname
        }
    }
}

console.log(o.prop.getFullname())//Aureio De Rose
var test=o.prop.getFullname;
console.log(test())//Joh Don

var fullname="Joh Don";
var o={
    fullname:'colin Ihrig ',
    prop:{
        fullname:'Aureio De Rose ',
        getFullname:function(){
            // console.log(this) // {fullname: "Aureio De Rose ", getFullname: ƒ},也即是prop对象
            return this.fullname
        }
    }
}

console.log(o.prop.getFullname())//是谁在调用getFullname()方法 :o对象下面的prop对象,
var test=o.prop.getFullname;//function(){return this.fullname}
console.log(test())//Joh Don

for(var i=0;i<5;i++){

    setTimeout(function(){

        console.log(i)

    },1000)

}

//输出5个5

// setTimeout是异步执行的，遇到setimeout首先会向任务队列里添加1个个任务，只有主线上的全部任务全部执行完了才会去去执行队列的里的任务，
// 所以主线执行完后的是i等于5,再去执行队列任务里的定时任务，实际是执行（循环多少次）个setTimeout里的函数

for(let i=0;i<5;i++){

    setTimeout(function(){

        console.log(i)

    },1000)

}

//输出0 1 2 3 4

// setTimeout是异步执行的，遇到setimeout首先会向任务队列里添加这个任务，只有主线上的全部任务全部执行完了才会去去执行队列的里的任务，
// 这个是let,就有作用域了，那么作用域怎么看呢？ 一次循环就是一个域，在这个域里，每次循环后对应的i值也是不一样，因此最后执行setTimeout里的（循环次数）个函数时就有对应的i值，所以输出0 1 2 3 4

function F(){

    this.conuter={n:0}

    this.number=0
}

function B(){}

B.prototype=new F();

B.prototype.change=function(){
    console.log(this.conuter.n,this.number)
    this.conuter.n+=1
    this.number+=1
}

console.log(B.prototype.constructor===F)//true  共用一个内存地址 


var a=new B()

var b=new B()

a.change()// 0 0

a.change()// 1 1

b.change()// 2 0

a.change()// 3 2

//实例化一次 就会初始化一次，引用类型的conuter是保存在内存中的对象，JavaScript不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间，因此复合属性conuter下面的n是无法被实例初始化的
//基本数据类型number是按值访问的，因为可以操作保存在变量中的实际的值，number是会在实例化的时候初始化

function a(){
    console.log('b=>',b)//b=> undefined
    var b=10;
    var b=function(){}
}
a()

词法分析,执行a(),a函数的作用域里,又开始预解析,预解析阶段都不执行代码的,遇到var b=undfined, 又遇到var b 还是赋值undfined,开始执行阶段,从上往下依次,执行,由于预解析var b等于undefined,因此打印出undefined,

function a(){
    console.log('b=>',b)//b=> ƒ b(){}
    var b=10;
    function b(){}
}
a()

依旧先词法分析,执行a(),a函数又是一个作用域,又得预解析,遇到var的function开头,或是参数,就会很敏感,首先,遇到var b赋值undefined,遇到function 开的b函数,由于变量提升,就相当于下面:

function a(){
    var b=function(){}
    console.log('b=>',b)//b=> ƒ b(){}
    var b=10;
}
a()

变量提成是提升到作用域顶部,可以再修改下例子

console.log(a)//function a(){}
function a(){}
<=>
var a=function(){}
console.log(a)//function(){}

var o={
    obj:{
        getFullname:function(){
            setTimeout(()=>console.log(this),1000)//obj
        }
    }
     
}

o.obj.getFullname()

定时器里的箭头函数this 指向的是上一级的父对象

var fullname="Joh Don";
var o={
    fullname:'colin Ihrig ',
    prop:{
        fullname:'Aureio De Rose ',
        getFullname:function(){
            return ()=>this.fullname
        }
    }
}


console.log(o.prop.getFullname()())//Aureio De Rose 
var test=o.prop.getFullname;
console.log(test()())//Joh Don