this指向、new过程

this指向关系图

this指向

1. 在浏览器里，在全局范围内this 指向window对象

<script type="text/javascript">
var name = '张三';
console.log(this);
console.log(window.name);
</script>

2. 在函数(普通函数)中，this永远指向最后调用他的那个对象；

var name = '周杰伦‘；
function show() {
conlose.log(this);
console.log(this.name);
}
show();

4. 构造函数中，this指向new出来的那个新的对象；

<script type="text/javascript">
var obj = {
name:'张三'
show:function(){
console.log(this);
console.log(this.name);
}
};
obj.show();

4. Call、apply、bind中的this被强绑定在指定的那个对象上，用来改变函数执行时的this指向

var name = 'zjk';
  function fun() {
  console.log (this.name);
}

var obj= {
  name: 'jake'
};
fun(); // zjk
fun.call(obj); //Jake

5. 箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；

let name = "zjk";

    let o = {
        name : "Jake",

        sayName: function () {
            console.log(this.name)     
        },

        func: function () {
            setTimeout( () => {
                this.sayName()
            },100);
        }

    };

    o.func()     // Jake

new过程

介绍
我们通常创建一个构造函数，使用new关键字来new出一个对象，那这个对象是如何产生的呢？
步骤：

1.在new开始时，创建一个空对象。
2.给这个空对象的原型_proto_赋值，并让这个空对象的_proto_属性指向构造函数的prototype属性
3.调用构造函数，并改变this的指向，指向我们新创建的空对象，给这个空对象添加属性。
4.返回这个空对象。
补充：

当我们在第四步的时候，可以判断我们的构造函数有没有返回值，当有返回值时，返回构造函数的返回值，当没有返回值时，返回我们创建的空对象

function fn() {
//第一步：创建对象
var obj = {};
//第二步：原型赋值
obj._proto_ = Foo.prototype;
//第三步：Foo函数执行，this指向obj对象，给obj添加属性。
let result = Foo.call(obj,'张三',20)
//第四步：判断构造函数是否返回对象数据类型，如果返回，则返回那个对象，如果没有返回，就返回obj对象
return typeof result === 'object'?result:obj;
}
let b = fn();
console.log(b)

function Foo(name,age) {
this.name = name;
this.age = age;
}
Foo.prototype.fn = function () {
console.log(this.name)
}
let a = new Foo('张三',20);
console.log(a);