JS基础知识储备-二


一、this

1、说明

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象

2、举例

var test = {
    a : 10,
    b : {
        a : 12,
        fn : function(){
            console.log(this.a); //12
        }
    }
}
test.b.fn();

3、解读

这里同样也是对象test点出来的,但是同样this并没有执行它,那你肯定会说我一开始说的那些不就都是错误的吗?其实也不是,只是一开始说的不准确

  • 情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window(undefined),但是我们这里不探讨严格版的问题。

  • 情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。

  • 情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象。

4、例题解析

var test = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = test.b.fn;
j();

this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的,例子4中虽然函数fn是被对象b所引用,但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window。

5、当this遇到return

function fn()  
{  
    this.user = '蜡笔小清新';  
    return function(){};
}
var a = new fn;  
console.log(a.user); //undefined
function fn()  
{  
    this.user = '蜡笔小清新';  
    return 1;
}
var a = new fn;  
console.log(a.user); //蜡笔小清新

如果返回值是一个对象(除了null,undefined),那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。

二、call/apply

1、说明

  • 两者都可以改变this指向
    var a = {
      user:"蜡笔小清新",
      fn:function(){
          console.log(this.user); //蜡笔小清新
      }
    }
    var b = a.fn;
    b.call(a);
  • 任何一个方法都可以.call,其实方法的执行就是方法.call 执行,例如test() 就相当于 test.call()
    function test() {
    console.log(’蜡笔小清新‘); //蜡笔小清新
    }
    test.call();

    2、用法

    function Person(name,age) {
    this.name = name;
    this.age = age; }
    var obj = {};
    Person.call(obj);
  • call 后边的括号里是可以传东西的,比如传一个 obj 进去,他就会引导着 Person 发生 很大的变化。如果在 Person 底下 new 的话,this 就代表了构造函数所 产生的对象,我们假如说没有new的话,this默认是指向window的,但是我们在call 里传 obj 了,那么这个 this 就不是默认的了,就变成 obj 了,就是 call 里边传谁进 去,this 就是谁。等于说里边现在执行的时候就是 obj.name = name,obj.age = age, 即使是这样,依然可以传参:
    Person.call(obj,’小万’,20);
    现在访问 obj 就得到{name: “小万”, age: 20},因为 call 括号里的第一位会改变 this 指向,第一位以后都会当成正常的实参传到形参里边去(null就指向window),所以这里边第二个实参对应 的是函数执行的第一位形参,第三个实参对应的是函数执行的第二位形参。所以 call 的根本原因是改变 this 指向,借用 Person 的执行封装了 obj,借用你的方法来实现我 的功能。

    3、示例

function Wheel(wheelSize, style) {
    this.wheelSize = wheelSize;
    this.style = style;
}
function Sit(c, sitColor) {
    this.c = c;
    this.sitColor = sitColor;
}
function Model(height, width, len) {
    this.height = height;
    this.width = width;
    this.len = len;
}
function Car(wheelSize, style, c, sitColor, height, width, len) {
    Wheel.call(this, wheelSize, style);
    Sit.call(this, c, sitColor);
    Model.call(this, height, width, len);
}
var car = new Car(100, "魂动之恶魔之眼", "织物", "white", 1800, 1900, 4900);

4、apply

  • call 和 apply 基本上是一样的,只是写法不一样,call 需要把实参一个个传进去,但 是 apply 只能传一个值 arguments,即实参列表
function Person(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
}
function Student(name, age, sex, tel, grade) {
    Person.apply(this, [name, age, sex]);
    this.tel = tel;
    this.grade = grade;
}
var student = new Student('小万', 20, 'male', 187, 2017);

三、bind

1、区别

  • bind和call、apply方法不同,实际上bind方法返回的是一个修改过后的函数。(可以通过call和apply方法来实现bind)
var a = {
    user:"蜡笔小清新",
    fn:function(){
        console.log(this.user); //蜡笔小清新
    }
}
var b = a.fn;
var c = b.bind(a);
c();

2、传参

  • 同样bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的。如果传值是对象,返回的是对象的实例。
var a = {
    user:"蜡笔小清新",
    fn:function(e,d,f){
        console.log(this.user); //蜡笔小清新
        console.log(e,d,f); //10 1 2
    }
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);

文章作者: wanzhr
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 wanzhr !
评论
 上一篇
JS基础知识储备-三 JS基础知识储备-三
一、异步编程1、异步的概念异步(Asynchronous, async)是与同步(Synchronous, sync)相对的概念。 在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中
2020-08-24 wanzhr
下一篇 
JS基础知识储备-一 JS基础知识储备-一
一、预编译1、预编译前奏JavaScript执行三部曲:我们知道,JS是解释性语言,解释一行执行一行,但是在解释执行之前,他会进行两个过程,语法分析和预编译,语法分析就是他会把正片JS代码扫描一遍,看看有没有语法错误,接下来进行的就预编译。
2020-07-26 wanzhr
  目录