最详细的JS学习笔记(连载)第二章、函数(this)

2024-06-19 03:44

本文主要是介绍最详细的JS学习笔记(连载)第二章、函数(this),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

9、this

全局中的this指向的是window,函数内的this也是指向window;对象方法中的this指向该方法。函数对象赋值给对象属性的时候,this指向的是该对象

var obj = {

    name:'wyang'

}

function person(){

    return this.name;

}

obj.sayNma = person;

obj.person();    //wyang

对象原型链上的this

var obj = {

    sayPro:function(){

        return  '名字:'+this.name+'年龄:'+this.age;

    }

}

var o = Object.create(obj);

o.name = 'wyang';

o.age = 26;

console.log(o.sayPro());    //名字:wyang年龄:26

(1)、全局的this(浏览器) 全局作用域下的this一般指向全局对象,浏览器汇总的全局对象就是window。

https://images2015.cnblogs.com/blog/315302/201702/315302-20170214150439629-201961039.png

(2)、一般函数的this(浏览器)【重点】   全局作用域下直接调用f1(),this就仍然指向全局对象,浏览器中就是window,在node.js里面就是global对象。

 

https://images2015.cnblogs.com/blog/315302/201702/315302-20170214150707082-905517858.png

严格模式下直接调用f2(),this执行是undefined。

https://images2015.cnblogs.com/blog/315302/201702/315302-20170214150954285-1991193896.png

调用函数时,this被绑定到全局对象。如下内部函数调用时this也是绑定到全局对象window。

https://images2015.cnblogs.com/blog/315302/201703/315302-20170306101710250-280168594.png

倘若语言设计正确,当内部函数被调用时,this应该仍然绑定到外部函数的this变量。这个设计错误的后果就是方法不能利用内部函数来帮助它工作,因为内部函数的this被绑定了错误的值,所以不能共享该方法对对象的访问权。

解决方案如下:定义一个变量that并给它赋值为this,那么内部函数就可以通过that访问到this。

//函数字面量创建add

var add=function(a,b){

    return a+b;

}

var myObject = {

    value: 0,

    increment: function(inc) {

        this.value += typeof inc === 'number' ? inc : 1;

    }

}

myObject.increment();

document.writeln(myObject.value); //1

myObject.increment(2);

document.writeln(myObject.value); //3

//给myObject增加一个double方法

myObject.double=function(){

    var that=this;       //解决方法

    var helper=function(){

        that.value=add(that.value,that.value);

    }

    helper();  //以函数的形式调用helper

}

//以方法的形式调用double

myObject.double();

document.writeln(myObject.value); //6

(3)、作为对象方法的 函数的this【重点】   只要将函数作为对象的方法o.f,this就会指向这个对象o。

var o={                                var o={prop:37};

    prop:37,                           function independent(){

    f:function(){                         return this.prop;

        return this.prop;                 }

    }                              o.f=independent;

}                                  console.log(o.f()); //37

console.log(o.f()); //37

在方法调用模式中this到对象的绑定发生在调用时,这个"超级"延迟绑定(very late binding)使得函数可以对this高度重用。【update20170306】

(4)、对象原型链上的this

对象o有个属性f。p是个空对象,并且p的原型指向o。给p添加2个属性a和b,再调用p.f()。调用p.f()的时候调用的是p的原型o上面的这样一个属性f。所以对象原型链上的this调用时指向的还是对象。

var o={

f:function(){

return this.a+this.b

}};

var p=Object.create(o);

p.a=1;

p.b=4;

console.log(p.f()); //5

(5)、get/set方法与this    get set方法中的this一般也是指向get,set方法所在的对象。

function modulus(){

              return Math.sqrt(this.re*this.re+this.im*this.im);

}

var o={

              re:1,

              im:-1,

              get phase(){

                  return Math.atan2(this.im,this.re);

           }

}

Object.defineProperty(o,'modulus',{

              get:modulus,

              enumerable:true,

              configurable:true

})

console.log(o.phase,o.modulus); //-0.7853981633974483 1.4142135623730951

(6)、构造器中的this【重点】

如果在一个函数前面带上new来调用,那么背地里将会创建一个连接到该函数的prototype成员的新对象,同时this会绑定到那个新对象上。将MyClass作为了构造器来用。

function MyClass(){

           this.a=37;

}

var o=new MyClass();

/*this指向空对象,并且这个空对象的原型指向MyClass.prototype,this作为返回值,因为没有return,所以对象o就会有属性a为37*/

console.log(o.a);//37

注意:return语句返回的是对象的话,将该对象作为返回值,所以下面a就是38。

function C2(){

           this.a=37;

           return {a:38};

}

o=new C2();

console.log(o.a);//38

(7)、call/apply方法与this【重点】

function add(c,d){

              console.log(this.a+this.b+c+d);

}

var o={a:1,b:3};

//call调用   add.call(o,5,7);     //16   //1+3+5+7=16

//apply调用  add.apply(o,[10,20]);    //34   //1+3+10+20=34

应用

function bar(){

              console.log(Object.prototype.toString.call(this));

}

bar.call(7);      //[object Number]

https://images2015.cnblogs.com/blog/315302/201702/315302-20170214165309222-1096305360.png

call和apply如果this传入null或者undefined的话,this会指向全局对象,在浏览器里就是window。   如果是严格模式的话:传入this为null和undefined,那this就是null和undefined。

https://images2015.cnblogs.com/blog/315302/201702/315302-20170214165601050-1516050802.png

(8)、bind与this[ES5提供,IE9+才有]   想把某一个对象作为this的时候,就传进去。

function f(){

              return this.a;

}

var g=f.bind({a:"test"});

console.log(g());        //test 绑定一次,多次调用,仍然实现这样一个绑定,比apply和call更高效

var o={a:37,f:f,g:g};       //  f属性赋值为直接的f方法,g赋值为刚才绑定之后的方法

console.log(o.f(),o.g());  //37 "test"    o.f()通过对象的属性的方式调用的,返回37。比较特殊的一点,使用bind方法绑定了之后,即使把新绑定之后的方法作为对象的属性去调用,仍然会按照之前的绑定去走,所以仍然返回test应用【bind的经典例子】

this.x=9;     //相当于window.x=9

var module={

        x:81,

           getX:function(){return this.x;}

};

module.getX();              //  81 作为对象方法调用

var getX=module.getX();         //  把对象的方法赋值给一个变量

getX();                     //  9  this指向window,调用的是window的x

var boundGetx=getX.bind(module);

boundGetx();                //  81  通过bind修改运行时的this


本人是以网络视频与网络文章的方式自学的,并按自己理解的方式总结了学习笔记。有不正确之处请各位高手多多指点,一起学习进步。【VX:czlingyun    暗号:CSDN】

这篇关于最详细的JS学习笔记(连载)第二章、函数(this)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1073910

相关文章

最新版IDEA配置 Tomcat的详细过程

《最新版IDEA配置Tomcat的详细过程》本文介绍如何在IDEA中配置Tomcat服务器,并创建Web项目,首先检查Tomcat是否安装完成,然后在IDEA中创建Web项目并添加Web结构,接着,... 目录配置tomcat第一步,先给项目添加Web结构查看端口号配置tomcat    先检查自己的to

使用Nginx来共享文件的详细教程

《使用Nginx来共享文件的详细教程》有时我们想共享电脑上的某些文件,一个比较方便的做法是,开一个HTTP服务,指向文件所在的目录,这次我们用nginx来实现这个需求,本文将通过代码示例一步步教你使用... 在本教程中,我们将向您展示如何使用开源 Web 服务器 Nginx 设置文件共享服务器步骤 0 —

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器:基石搭建(一

SpringBoot集成SOL链的详细过程

《SpringBoot集成SOL链的详细过程》Solanaj是一个用于与Solana区块链交互的Java库,它为Java开发者提供了一套功能丰富的API,使得在Java环境中可以轻松构建与Solana... 目录一、什么是solanaj?二、Pom依赖三、主要类3.1 RpcClient3.2 Public

手把手教你idea中创建一个javaweb(webapp)项目详细图文教程

《手把手教你idea中创建一个javaweb(webapp)项目详细图文教程》:本文主要介绍如何使用IntelliJIDEA创建一个Maven项目,并配置Tomcat服务器进行运行,过程包括创建... 1.启动idea2.创建项目模板点击项目-新建项目-选择maven,显示如下页面输入项目名称,选择

Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)

《Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)》:本文主要介绍Python基于火山引擎豆包大模型搭建QQ机器人详细的相关资料,包括开通模型、配置APIKEY鉴权和SD... 目录豆包大模型概述开通模型付费安装 SDK 环境配置 API KEY 鉴权Ark 模型接口Prompt

在 VSCode 中配置 C++ 开发环境的详细教程

《在VSCode中配置C++开发环境的详细教程》本文详细介绍了如何在VisualStudioCode(VSCode)中配置C++开发环境,包括安装必要的工具、配置编译器、设置调试环境等步骤,通... 目录如何在 VSCode 中配置 C++ 开发环境:详细教程1. 什么是 VSCode?2. 安装 VSCo

Spring Boot 中整合 MyBatis-Plus详细步骤(最新推荐)

《SpringBoot中整合MyBatis-Plus详细步骤(最新推荐)》本文详细介绍了如何在SpringBoot项目中整合MyBatis-Plus,包括整合步骤、基本CRUD操作、分页查询、批... 目录一、整合步骤1. 创建 Spring Boot 项目2. 配置项目依赖3. 配置数据源4. 创建实体类

python与QT联合的详细步骤记录

《python与QT联合的详细步骤记录》:本文主要介绍python与QT联合的详细步骤,文章还展示了如何在Python中调用QT的.ui文件来实现GUI界面,并介绍了多窗口的应用,文中通过代码介绍... 目录一、文章简介二、安装pyqt5三、GUI页面设计四、python的使用python文件创建pytho

SpringBoot整合InfluxDB的详细过程

《SpringBoot整合InfluxDB的详细过程》InfluxDB是一个开源的时间序列数据库,由Go语言编写,适用于存储和查询按时间顺序产生的数据,它具有高效的数据存储和查询机制,支持高并发写入和... 目录一、简单介绍InfluxDB是什么?1、主要特点2、应用场景二、使用步骤1、集成原生的Influ