Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
haizhilin2013 opened this issue Jun 9, 2019 · 14 comments
Open

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

haizhilin2013 opened this issue Jun 9, 2019 · 14 comments
Labels
js JavaScript

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the js JavaScript label Jun 9, 2019
@wenyejie
Copy link

  • 模版解析渲染

@myprelude
Copy link

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

@zoggee
Copy link

zoggee commented Jun 16, 2019

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

@Vi-jay
Copy link

Vi-jay commented Jul 31, 2019

补充调用上下文

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

@ipadthree
Copy link

  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
Copy link

censek commented Nov 26, 2019

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

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

@ZindexYG
Copy link

构造函数

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
Copy link

azzyx commented Oct 26, 2020

btn.onclick(function() {
 console.log(this.className)
});

@MrZ2019
Copy link

MrZ2019 commented Nov 30, 2020

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

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

@dugufck666
Copy link

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

@xiaoqiangz
Copy link

// 全局作用域
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
Copy link

azzyx commented Jun 8, 2022 via email

@mohaixiao
Copy link

(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
Copy link

azzyx commented Jul 8, 2022 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
js JavaScript
Projects
None yet
Development

No branches or pull requests