this对象的小魔术

分析以下几种情况下的程序输出值产生的原因:

程序1.
function obj(name){
    if(name){
        this.name = name
    }
    return this
}
obj.prototype.name = "name2"
var a = obj("name1")
var b = new obj 
console.log(a.name)  // 'name1'
console.log(b.name) // 'name2'
name = 'name3'
console.log(a.name) // 'name3'
console.log(b.name) // 'name2'

输出分析:

obj.prototype.name = "name2"
var a = obj('name1') ;
 /*直接调用obj函数
  *1. this -> window
  *2. 创建全局变量name,并赋值为'name1'
  *3. a -> window
*/
var b = new obj
 a.name // window.name = 'name1'
 b.name // 对象实例本身不存在属性name,返回原型对象上的name属性值'name2'
name = 'name3'  // 全局变量name被重赋值为'name3'
a.name // window.name = 'name3' 
b.name // 'name2'
程序2
function obj(name){
   if (name) {
      var obj = {}
      obj.name = name
      return obj
   }
}
obj.prototype.name = "name2"
var a = obj("name1")
var b = new obj
console.log(a.name)  // 'name1'
console.log(b.name // 'name2'
console.log(name) //undefined
name = 'name3'
console.log(a.name) // 'name1'
console.log(b.name) // 'name2'
console.log(name) // 'name3'

输出分析:

obj.prototype.name = "name2"
var a = obj('name1') ;
 /*直接调用obj函数
  *1. 创建对象obj
  *2. obj.name = 'name1'
  *3. a -> obj
*/
 var b = new obj
 a.name // obj.name = 'name1'
 b.name // 对象实例本身不存在属性name,返回原型对象上的name属性值'name2'
 name // 创建全局变量
 name = 'name3'  //window.name = 'name3'
 a.name //obj.name = 'name1' 
 b.name // 'name2'
程序3
var x = 'a'
function printX() {
  console.log(x) // undefined
  var x = 'b'
  console.log(x) // 'b'
}
printX()
var y = 'c'
function printY() {
  console.log(y) // 'c'
  y = 'd'
  console.log(y) //'d'
}
printY()
输出分析:
//声明提升
var x = 'a'
function printX() {
  var x
  console.log(x) // undefined
  x = 'b'
  console.log(x) // 'b'
}
程序4
 function foo(a){
     var a;
     return a;
 }
 function bar(a){
    var a = 'bye';
    return a;
 }
 [foo('hello'),bar('hello')] // ['hello','bye']
输出分析:
// 解析foo('hello')执行过程:
 function foo(){
     var a
     var a
     a = hello
     return a
 }

// 解析bar('hello')执行过程:
 function bar(){
    var a
    var a
    a = "hello"
    a = 'bye'
    return a
 }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,937评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,333评论 25 708
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,150评论 6 13
  • 又是一个忙碌周末。 凌晨六点,和几个朋友一起,驱车两个小时来到许昌,参加一个公司的创业培训会。会议安排的...
    4be88d09a5e2阅读 321评论 0 0
  • /温如夏 你的梦想那样素朴,远离这个尘世的喧嚣。你的梦想又是那样的遥不可及,因为根本没有人,从来就没有人,可以逃离...
    温如夏阅读 884评论 7 6