首页 > 代码库 > this —JavaScript面向对象高级
this —JavaScript面向对象高级
# this的用法 #
重点: 谁调用就指向谁
//ES6新特性中,定义箭头函数 var fn = () =>{...} 这里面如果有this,是固化的,跟bind情形基本相似
1,取值:在函数真正被调用的时候确定,因为每次调用会有一个不同的上下文
var per1 = new Person(‘zhangsan‘,18)
per1.sayHello()
var per2 = new Person(‘lis‘,20)
per2.sayHello()
per1一调用就指向per1,per2一调用就指向per2
2.**谁调用就指向谁** 全局调用——>window 对象调用——>当前对象
function Person(name,age){
this.name =name;
this.age= age;
this.sayHello = function() {
console.log(‘hello,i m ‘+this.name+‘i m ‘+ this.age)
}
}
var per1 = new Person(‘zhangsan‘,18)
per1.sayHello()
var per2 = new Person(‘lis‘,20)
per2.sayHello()
谁调用这个this ,this就指向谁
3.函数如果是作为对象的一个**属性**,则指向的是当前对象
如果是一个**普通函数**,则是一个window属性
a.var obj = {
name:‘zhangsan‘,
age:10,
sayHello:function(){
console.log(this.name)
}
}
obj.sayHello() //zhangsan
b.var obj = {
name:‘zhangsan‘,
age:10,
sayHello:function(){
function inner(){
console.log(this.name)
}
}
}
obj.sayHello() //打印不出东西
因为这个this指向window
4.普通函数内部怎么获取当前对象内部的属性
法1:当参数 2.this保存 3.call方法,会马上调用 4.bind(this) 没有被立即执行
p1.sayName = p1.sayName.bind(p1) (固化this),传值非常有用,模块之间
例:
1.当参数传递
var obj = {
name:‘zhangsan‘,
age:10,
sayHello:function(){
function inner(name){
console.log(name)
}
inner(this.name) //当做参数传递
}
}
obj.sayHello() //zhangsan
// 2.将对象的this保存下来
var obj = {
name:‘zhangsan‘,
age:10,
sayHello:function(){
var that = this //保存this,也相当于固化
function inner(){
console.log(that.name) //以后调用的that都是对象的this
}
inner()
}
}
obj.sayHello() //zhangsan
3.采用call或apply方法手动修改this
var obj = {
name:‘zhangsan‘,
age:10,
sayHello:function(){
function inner(){
console.log(this.name)
}
inner.call(this) //将inner的this指向当前对象
}
}
obj.sayHello() //zhangsan
var obj1 = {};
obj1.sayHello = obj.sayHello;
obj1.name = ‘lis‘
obj1.sayHello() //lis
4.bind(this)将this固化下来
var obj = {
name:‘zhangsan‘,
age:10,
sayHello:function(){
function inner(){
console.log(this.name)
}
inner.bind(this)() //添加绑定,注意:bind基本与call类似,但是不会立即执行,需要加()立即执行。
}
}
obj.sayHello() //zhangsan
var obj1 = {
name:‘lis‘
}
var obj2 = {
name:‘wang5‘
}
obj1.sayHello = obj.sayHello.bind(obj2) //调用obj里的sayhello方法,绑定obj2的name,也可以绑定其他obj的,如果没有name属性,则返回undefined
obj1.sayHello() //wang5
5.如果a:this.x obj.a——> this指向window
这里注意分清属性里的this和方法里的this的区别
例:
var age = 15;
var obj = {
name: ‘zhangsan‘,
age:5,
x:this.age, //这里的this指向window,注意理解一个思想,谁调用this才指向谁
sayAge:function(){
console.log(this.age)
}
}
console.log(obj) //x = 15 ,指向window
obj.sayAge() //5
this —JavaScript面向对象高级