Skip to content

[js] 第55天 写出4个使用this的典型例子 #217

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第55天 写出4个使用this的典型例子

Activity

wenyejie

wenyejie commented on Jun 10, 2019

@wenyejie
  • 模版解析渲染
myprelude

myprelude commented on Jun 13, 2019

@myprelude
  • 构造函数
function Contructor(name){
  this.name = name
}
  • call bind apply 使用this
  setTimeout(function(){}.bind(this),1000)
zoggee

zoggee commented on Jun 16, 2019

@zoggee

react中constructor中, this.handleClick=this.handleClick.bind(this);

Vi-jay

Vi-jay commented on Jul 31, 2019

@Vi-jay

补充调用上下文

const ctx = {
  a:1,
  test(){
    console.log(this.a);
  }
};
ctx.test();
ipadthree

ipadthree commented on Sep 13, 2019

@ipadthree
  1. Implicit binding:
var b = {
    a: function() {
        console.log(this);
    }
}
b.a();
// this is b
  1. Explicit binding:
b.a.call(this); // this is window
  1. new binding
function B() { 
    this.a = function() {console.log(this.b)}, 
    this.b = 1
}
let b = new B();
b.a();
// this is b object;
  1. window binding
    var a = 1;
    this.a;
censek

censek commented on Nov 26, 2019

@censek

1⃣️ 全局 this 是 window
2⃣️ 函数 this 是调用者
3⃣️ 构造函数的 this 是 new 之后的新对象
4⃣️ call ,apply ,bind 的 this 是第一个参数

https://blog.csdn.net/Bule_daze/article/details/102831150

ZindexYG

ZindexYG commented on Dec 11, 2019

@ZindexYG

构造函数

function Anmai(params) {
  this.params = params
}

call,bind,apply

call 求最值

let maxNum = Math.max.call(this,5,45,120,-1)
let minNum = Math.min.call(this,5,45,120,-1)
console.log(maxNum ,minNum);

apply 求最值

const nums = [5,45,120,-1]
let maxNum = Math.max.apply(this,nums)
let minNum = Math.min.apply(this,nums)
console.log(maxNum ,minNum);

bind 使用例子

PS:本例子请在浏览器中使用

this.x = 9;    // 在浏览器中,this 指向全局的 "window" 对象
var Module = {
  x: 81,
  getX: function() { return this.x; }
};

console.log(Module.getX());// 81

var retrieveX = Module.getX;
console.log(retrieveX());
// 返回 9 - 因为函数是在全局作用域中调用的

// 创建一个新函数,把 'this' 绑定到 module 对象
// 新手可能会将全局变量 x 与 module 的属性 x 混淆
var boundGetX = retrieveX.bind(Module);
console.log(boundGetX()) // 81
azzyx

azzyx commented on Oct 26, 2020

@azzyx
btn.onclick(function() {
 console.log(this.className)
});
smile-2008

smile-2008 commented on Nov 30, 2020

@smile-2008

1⃣️ 全局 this 是 window
2⃣️ 函数 this 是调用者
3⃣️ 构造函数的 this 是 new 之后的新对象
4⃣️ call ,apply ,bind 的 this 是第一个参数

https://blog.csdn.net/Bule_daze/article/details/102831150

dugufck666

dugufck666 commented on Oct 26, 2021

@dugufck666

普通函数和定时器,this是window
对象的方法中,this是对象本身
对象的普通属性中的this是全局变量window,在node中global
事件中,谁注册的事件,this就是那个对象

xiaoqiangz

xiaoqiangz commented on Jun 8, 2022

@xiaoqiangz

// 全局作用域
var wid = '全局作用域this'
console.log(this.wid)
// 构造函数
function Person19(name) {
this.name = name
}
// call
var callO = {
wid: 'call this'
}
function sayCallName() {
console.log(this.wid)
}
sayCallName.call(callO)
// apply求值
var arrN = [1,2,3,45,6,2]
console.log(Math.max.apply(this, arrN))

azzyx

azzyx commented on Jun 8, 2022

@azzyx
mohaixiao

mohaixiao commented on Jul 8, 2022

@mohaixiao

(1)在html元素事件属性中使用,如

(2)构造函数

function Animal(name, color) {

This.name = name;

this.color = color;

}

(3)

Var btn = document.getElementById(“text”);

Btn.onclick = function() {

Alert(this.value); //此处的this是按钮元素

}

(4)CSS expression表达式中使用this关键字

division element
这里的this指代div元素对象实例本身。
azzyx

azzyx commented on Jul 8, 2022

@azzyx

2 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    jsJavaScript

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@wenyejie@haizhilin2013@ipadthree@xiaoqiangz

        Issue actions

          [js] 第55天 写出4个使用this的典型例子 · Issue #217 · haizlin/fe-interview