JavaScript内的this指向问题

Ellan980809

已于 2024-06-17 08:07:22 修改

阅读量857

点赞数 18

文章标签： javascript 前端开发语言

于 2022-08-27 15:24:42 首次发布

本文链接：https://blog.csdn.net/Ellan980809/article/details/126558349

版权

1.this指向问题（一）

this：函数调用时javascript会默认给this绑定一个值

在this运行情况下，this的指向跟调用时，调用方式有关

2.this指向问题（二）绑定规则默认-显式-隐式-new字符-内置函数

规则一 ~默认绑定

独立函数调用：函数没有绑定到某个对象上去去调用

var info = function() {
    console.log(this);
};
// window.info()   
info();//this指向window

var obj = {
    name:"lisi",
    data:function() {
        console.log(this);
    }
};
obj.data()//this指向obj

在 严格（strict）模式下

 "use strict"
 function info() {
    console.log(this);
 }
 info(); // 此时为undefined

规则二~显示绑定
1. .在调用的对象内部有一个对函数的引用（例如：一个属性）
2. 没有引用，调用时会报错

function info() {
    console.log(this);
}
var obj = {
    name:'lis'
}
obj.data = info;
obj.data(); //this指向obj

如果需要在内部调用，又不用新增属性的话，可以使用apply（），call（），bind（）方法简化代码

apply（）内第一个参数是设置this指向第二个参数为数组

appy()方法有一个参数时（影响this指向）

function fn(){
    console.log(this);
}
var obj = {
    name:"lis",
}
fn.apply(obj);//this指向obj  且无新增属性

apply（）方法又两个参数时, 第二个参数为数组做为函数参数

var info = function(item,age,city) {
    return console.log(item,age,city);     //函数有返回值的时候要return
}
var obj = {
    phone:123-6677-999
}
    info.apply(obj,["lis",18,"NewYork"]);//this指向obj 且数组为该函数的参数

call()内第一个参数是设置this指向第二个参数为函数参数

call()有一个参数时

function fn1(){
    console.log(this);
}
var obj = {
    name:"lis",
}
fn1.call(obj);//this指向obj  且无新增属性

call()有两个参数时及以上两个以上

var info = function(item,age,city) {
    return console.log(item,age,city);     //函数有返回值的时候要return
}
var obj = {
    phone:123-6677-999
}
    info.call(obj,"lis",18,"NewYork");//this指向obj 且数组为该函数的参数

bind（）不常用

bind（）创建一个新的函数，可以赋值给其他变量，故而可以重复调用且this指向不会发生改变

var info = function(item,age,city) {
    return console.log(item,age,city);     //函数有返回值的时候要return
}
var obj = {
    phone:123-6677-999
}
    var fn = info.bind(obj,"lis",18,"NewYork");//this指向obj 且数组为该函数的参数
    fn();//this指向不会发生改变  且可以重复调用

js五种基本数据类型

当五种基本数据类型作为call（），apply（），bind（）第一个参数时

var info = function () {
            console.log(this);
        }

        info.call("str");// String
        info.call(1);//Number
        info.call(true);//Boolean
        info.call(null);//window
        info.call(undefined);//window
        info.call({});//{}
        info.call([]);//[]
        info.call(() => { });//()=>{}
        info.apply("str");// String
        info.apply(1);//Number
        info.apply(true);//Boolean
        info.apply(null);//window
        info.apply(undefined);//window
        info.apply({});//{}
        info.apply([]);//[]
        info.apply(() => { });//()=>{}

        var fn = info.bind("str");// String
        fn()
        var fn = info.bind(1);//Number
        fn()
        var fn = info.bind(true);//Boolean
        fn()
        var fn = info.bind(null);//window
        fn()
        var fn = info.bind(undefined);//window
        fn()
        var fn = info.bind({});//{}
        fn()
        var fn = info.bind([]);//[]
        fn()
        var fn = info.bind(() => { });//()=>{}
        fn()

规则三~隐式绑定

通过某个对象去调用，改变this指向

var info = function() {
    console.log(this);
}
var obj = {
    name:"lis",
    data:info
}

obj.data()// this指向obj

规则四~new字符构造函数绑定

new字符的调用

创建一个空白对象
this指向为该对象
给该对象属性进行赋值

如果函数没有返回其他对象，表达式会返回这个新的对象

function fn(name, age, city) {
            this.xingm = name,
                this.ninaling = age,
                this.chengshi = city
            console.log(this)
        }
        var info = new fn("kris", 18, "上海") //this指向fn

规则五~内置函数的绑定

如高阶函数filter内this指向

var arr=[1,2,3,4];
arr.filter(item=>console.log(this));//这里this指向window

forEach

var arr=[1,2,3,4];
arr.forEach(item=>console.log(this));//这里this指向window

setTimeout,setInterval内的this指向

setTimeout(()=>{console.log(this)},2000)//this指向window
setInterval(() => { console.log(this) }, 2000)//this指向window

3.this指向问题（三）绑定规则-优先顺序

默认最低
显示绑定 > 隐式绑定
new > 隐式
new > bind
- new 绑定不能与apply（） , call()同时用

4.this指向问题-箭头函数

箭头函数比较特殊，没有this，arguments属性；
箭头函数不能用作构造函数因为箭头函数没有原型

箭头函数的写法

//常用创建函数
function fn(item) {
        return console.log(item);
}
fn(1)
//箭头函数  格式：（）=>{}
var fn = (item) =>{
    return   console.log(item);
}
fn(0)
//箭头函数 简化   当参数只有一个时 （）可以省略， 当运行代码只有一段时 {}可以省略 return 省略
var fn = item=>console.log(item);
fn(o)

//箭头函数 写入对象时 需要（）括住
var info = () => ({ name: "Ellan", age: 18 })

箭头函数优化高阶函数简化代码

   // 箭头函数未优化
        var arr = [1, 2, 3, 4, 5, 6, 7, 8];
        var number = arr.filter(function (item) {
            return item % 2 == 0;
        }).map(function (item) {
            return item ** 2;
        }).reduce(function (pre, now) {
            return pre + now
            // 0 默认求和 可以省略
        }, 0);
        console.log(number);

        // 箭头函数优化高阶函数
        var number2 = arr.filter(item => item % 2 == 0).map(item => item ** 2).reduce((pre, now) => pre + now);
        console.log(number2);

箭头函数的this指向

 // 1.箭头函数没有this指向
        // 2.箭头函数作查找变量this
        // 3.由于当前变量没有this，则会向上一层作用域查找this变量
        // 4.由于上一层是全局作用域故而该this指向window
        var info = () => {
            console.log(this)
        }
        info()
        var obj = {
            name: "age",
            data: () => {
                console.log(this)
            }
        }
        obj.data()
        var obj1 = {
            name: "age",
            data: function () {
                console.log(this)
            }
        }
        obj1.data()

5.常见声明函数

 // 函数的声明方式
        // 1.声明式
        function info() {

        }
        // 2.赋值式  
        var info1 = function () {

        }
        // 3.new式 /构造式
        var info2 = new function () {

        }

        // 4.箭头式
        var info3 = () => {

        }
        // 调用函数3种方式
        info()
        info.apply()
        info.call()


        //  箭头函数可以传参 且内无this
        var getsum = (a, b) => {
            return a + b
        }

        var res = getsum(10, 11)
        console.log(res)

随便写的

<div style="width: 100px;height: 100px;background-color:red;"></div>
    <script>
        var div = document.querySelector("div")


        div.onclick = () => {
            var request = (url, num) => {
                var arr = [1, 2, 3, 4, 5, 6, 7];
                this.number = arr;
                var a = document.createElement("a")
                a.text = "百度一下,你就知道"
                div.append(a)
                a.href = url;
                a.target = "_blank";
                num.map(item => console.log(item))
            }
            var obj = {
                year: 2022,
                number: []
            }


            request.apply(obj, ["https://www.baidu.com", [1, 2, 3, 4, 5, 6]]);

        }


    </script>