getName()解析

179 阅读2分钟

变量声明提前

function varName(){
    console.log(aa);//undefined
    var aa=33;
    console.log(aa); //33
}
varName()

在函数内部aa变量提升

函数声明提前

函数表达式不存在变量提升


function funcName(){
  console.log(bb);
  function bb(){return 'hello'} //函数声明提前
  console.log(bb);
  bb();
}
funcName()

image.png

函数和变量同名 函数提升>变量提升

function funcName(){
  console.log(bb);
  var bb=123;
  function bb(){return 'hello'}
  console.log(bb);
  bb();
}

image.png

构造函数

构造函数的静态方法:定义在构造函数上的属性和方法,构造函数自身可访问 实例不能访问

构造函数内部方法 通过this写在构造函数内的属性和方法

//创建Foo方法 
function Foo() {
  getName = function () {
    console.log(1);
  }
  return this //this指向全局
}
//创建Foo的静态方法
Foo.getName = function () {
  console.log(2)
}
//创建foo实例的时候 如果Foo没定义getName 就会去原型上查找
Foo.prototype.getName = function () {
  console.log(3)
}

//函数表达式 不会进行函数提升
var getName = function () {
  console.log(4)
} //函数名提升 覆盖1

//全局方法 函数进行提升
function getName (){
  console.log(1);
}

调用方法:

Foo.getName()  //调用Foo的静态方法  输出2

getName() //调用全局方法  getName() 函数提升,getName表达式覆盖全局方法getName() 输出4

Foo().getName()//调用Foo,返回this,Foo函数内部的getName 覆盖全局getName 输出1

getName() //输出1

new Foo.getName() //执行Foo.getName() 调用Foo静态方法生成 Foo.getName(){} 输出2

new Foo().getName() //new Foo() 创建new Foo() 实例,调用实例上的getName(),如果没有去原型上查找   输出3

new new Foo().getName() // 先执行 new Foo()=>Foo() =>new Foo()=>实例调用getName()  输出3

new操作符干了什么

1、继承函数的prototype的新对象被创建。

2、使用指定的参数调用构造函数 ,并将 this 绑定到新创建的对象。

3、由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象,则使用步骤1创建的对象。

new Foo() 时,Foo方法内没有返回值 返回Foo.prototype对象 new Foo.getName() Foo.getName()没有返回值 默认返回 Foo.getName.prototype 对象