the deadline of JavaScript's this

chinafgj 发布于2019-08-21 10:35 / 2982人阅读

摘要：在用处千千万，基于自己研究和认识，今天做一个了断。可以取所属对象的上下文的方法称为公共方法，可以使属性，方法变成公开的属性方法在构造函数，方法中用到。内部函数调用的时候，只能搜索到其活动对象为止，不可能直接访问外部函数中的变量。

this

this在JavaScript用处千千万，基于自己研究和认识，今天做一个了断。

全局，匿名函数调用

对象方法调用

闭包总指向上一级

构造函数中，指向本身

引用时候，指向Windows

apply调用

全局(Global context)

In the global execution context (outside of any function),
this refers to the global object, whether in strict mode or not.

当在全局环境执行的时候，无论“严格模式”or“非严格模式”，this指向全局对象

console.log(this.document === document); // true
// In web browsers, the window object is also the global object:
console.log(this === window); // true
this.a = 37;//this.a 等价于 var a = 37;
console.log(window.a); // 37

函数中严与非严格有区别

function f1(){
  return this;
}
f1() === window; // global object

严格

function f2(){
  "use strict"; // see strict mode
  return this;
}
f2() === undefined;

方法调用

方法：当一个函数被保存为对象的一个属性的时候。

var num = {
    sum: 0,
    add: function(x,y){
        this.sum = x + y;
        console.log(this);
    }
}
num.add(2,3);
console.log(num.sum);

this 可以取所属对象的上下文的方法称为公共方法，可以使属性，方法变成公开的属性方法(在构造函数，方法中用到)。

构造器调用

需要使用new来调用，函数创建一个对象链接到prototype，this会绑定到那个新的对象上。

var Person= function(name){
    this.name= name;
} 
Person.prototype.showname= function(){
    console.log(this);
    return this.name;
}
var p = new Person("duke");
console.log("duke"+":"+p.showname());

函数调用

函数调用的时候会自动取得两个特殊的变量：this，arguments。js内部函数调用的时候，只能搜索到其活动对象为止，不可能直接访问外部函数中的变量。

解决方案：

如果该方法定义一个变量并给他赋值为this，那么内部函数就可以通过那个变量访问到this，我们可以把那个变量定义为that。

var myfun= {
    num: 1,
    fadd: function(x){
        this.num= x+3
    }
}
myfun.double= function(){
    var that = this;
    console.log(that);
    var d= function(){
        that.num= 90;
        that.num2= 1999;//可以用作添加属性
        console.log(that);
    }
    d();
}
// 这个案例说明没有外部变量引入到内部函数中
myfun.three= function(){
    console.log(this);
    console.log("three"+this.num);
    var that = this;//key point 
    var t = function(){
        console.log("this"+this);
        console.log("that"+that);
        console.log("inner"+this.num);
        console.log("inner"+that.num);
    }
    t();
}
myfun.fadd(4);
console.log(myfun.num);
myfun.double();
console.log("double"+myfun.num);
myfun.three();

apply调用

接收两个参数，第一个绑定给this，第二个就是一个参数数组

apply,call用法

apply

javascript中的this应用

apply,call 延伸

Where a function uses the this keyword in its body, 
its value can be bound to a particular object in the call using the 
call or apply methods that all functions inherit from Function.prototype.

function add(c, d){
  return this.a + this.b + c + d;
}
var o = {a:1, b:3};
// The first parameter is the object to use as
// "this", subsequent parameters are passed as 
// arguments in the function call
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
// The first parameter is the object to use as
// "this", the second is an array whose
// members are used as the arguments in the function call
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

用在类型检测

function bar() {
  console.log(Object.prototype.toString.call(this));
}
bar.call(7); // [object Number]
// 用apply较多，使用范围广
function bar() {
  console.log(Object.prototype.toString.apply(this));
}
bar.apply(7); // [object Number]

As a DOM event handler（dom事件处理）

When a function is used as an event handler, 
its this is set to the element the event fired from

用作事件的处理，给元素绑定方法

// When called as a listener, turns the related element blue
function bluify(e){
  // Always true
  console.log(this === e.currentTarget); 
  // true when currentTarget and target are the same object
  console.log(this === e.target);
  this.style.backgroundColor = "#A5D9F3";
}

// Get a list of every element in the document
var elements = document.getElementsByTagName("*");

// Add bluify as a click listener so when the
// element is clicked on, it turns blue
for(var i=0 ; i
参考developer.mozilla
总结，个人见解，欢迎批评指正

GPU云服务器云服务器 javascript的this javaScript中的this javascript中this详解 sdp for the webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85829.html

Socket Error 104 bug

摘要：概述技术栈错误详情报警机器人经常有如下警告过程确定报错位置有日志就很好办首先看日志在哪里打的从三个地方入手我们自己的代码没有的代码从上下来没有的代码在容器中执行 bug概述技术栈 nginx uwsgi bottle 错误详情报警机器人经常有如下警告: 1 2018-xx-xxT06:59:03.038Z 660ece0ebaad admin/admin 14 - - Sock...

keithyau 2019-07-30 18:45 评论0 收藏0
简单易懂的ECMA规范导读1 that&#039;s this

摘要：本文不是标准的中文翻译，也不是的入门教程，本文虽然以的常见问题切入，但并不适合想要快速了解这些问题的人才是快速了解问题的正解。尽量以英文原版为基础，为了流畅，可能会使用某些名词的中文翻译，但会将匹配的英文名词以此种样式中出现一次以避免误解。简单易懂的ECMA规范导读1 序最近混SF，恰巧又逢工作方面有了NodeJS的机会，迫切地有教别人怎么写JS的需求，我发现JS这个东西其实...

yintaolaowanzi 2019-08-19 14:45 评论0 收藏0
人工智能/数据科学比赛汇总 2019.6

摘要：内容来自，人工智能数据科学比赛整理平台。大赛面向全球高校在校生开放，旨在提升高校学生对数据分析与处理的算法研究与技术应用能力，探索大数据的核心科学与技术问题，尝试创新大数据技术，推动大数据的产学研用，本次大赛鼓励高校教师参与指导。内容来自 DataSciComp，人工智能/数据科学比赛整理平台。Github：iphysresearch/DataSciComp 本项目由 ApacheC...

gyl_coder 2019-06-26 19:02 评论0 收藏0
React："don&#039;t fuck it up like Google did

摘要：核心开发人员大神在开了个，用来征询社区对的建议。而且的工程师并没有因此止步，他们在文档中又告诉开发者，不仅仅要把写到中，也应该写到中。无论怎么使用自定义语法，也不应该影响这种好处，即使最终实现看起来有一些怪异。 React 核心开发人员 sebmarkbage 大神在 GitHub 开了个 issues，用来征询社区对 JSX 2.0 的建议。 showImg(https://segm...

Cristalven 2019-08-21 11:23 评论0 收藏0
聊聊jdk httpclient的ConnectionPool

摘要：调用计算的时间，这个方法会清理移除并过期的连接除了清理过期的连接外，还通过间接触发，去清理关闭或异常的连接序本文主要研究一下jdk httpclient的ConnectionPool HttpConnection HttpConnection.getConnection java.net.http/jdk/internal/net/http/HttpConnection.java ...

Worktile 2019-08-19 11:18 评论0 收藏0