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

时间: 2024-12-28 01:24:20

this —JavaScript面向对象高级的相关文章

对象的概念——javascript面向对象高级

什么是对象? a.对现实事物的抽象     -面向对象是对现实事物的抽象 b.对数据的封装    -是对具体数据的封装,是一堆属性和方法的集合 对象的三大特征(封装.继承.多态) 1.封装性,是对属性和方法的封装 2.继承是将别人没有的,拿过来成为自己的就是继承,js里不具备特定的继承的机制,但是可以通过技术上实 3.多态,不同情况的不同表现形式.如某个方法,传一个参数和传多个参数,得到的结果不一样 ## 创建对象的四种方式 ## **  1.声明范式** // var obj = {} **2

闭包 —JavaScript面向对象高级

# 闭包 # 我的理解:面试时,先说作用域链,再说闭包产生的原因,然后是垃圾回收GC,最后说闭包. a.一个函数内部声明的变量,就是它的私有变量. b.在javascript中特性中,函数是可以访问它所在作用域链的所有变量. c.但函数外部是不能直接访问函数内部的私有变量 D.通过函数内部再嵌套函数,子函数返回父函数的变量,就创建了一个闭包. 闭包的表现形式 模块化的本质:是通过函数的局部作用域特性来产生局部上下文来保存局部变量 1.函数作为返回值 function fn(){ var coun

继承性—javascript面向对象高级

## 继承性 ## js不是一门完全是面向对象的语言,它没有专门实现对象继承的机制,但是可以通过语法层面实现对象的继承,要实现继承可以通过以下几种方式实现继承. (这里也可以通过ES6中的class语法实现继承,更接近传统语言如java,请见我ES6新特性) 2.通过constructor实现传值. 3.类Class的概念:构造函数 通过构造函数产生的对象叫做实例.具备构造函数的所有属性 将公用的方法和属性,提取出来存到原型上 继承的几种方式 1.通过原型实现继承 function Father

原型和原型链 —javascript面向对象高级

原型 1.原型有什么用:js是用原型来实现继承 2.原型是:每一个对象都有其原型对象__proto__,这个原型对象指向构造它的构造函数的原型属性prototype. ## 一.函数和对象的关系 ## 1.函数是对象的一种,instanceof 可以判断 2.对象是函数创建的 ## 二.prototype 与 __proto__ ## 1.prototype是函数的一个属性,每一个函数都有protptype属性,这个值是一个对象,里面有一个constructor属性,指向它自己. 2.__pro

作用域和作用域链 —javascript面向对象高级

# 作用域和作用域链 # ## 1.作用域 ## 定义:函数声明时,会确定当前函数的作用域,所谓作用域就是作用的范围(地盘) 全局作用域: a. window是顶层对象,是一切函数,变量,对象的终点, b. 所以在全局范围内定义的函数或变量,它都是属于window对象的属性或方法. c. 其作用域范围是全局,任何地方均能调用. 局部作用域: a. 函数声明时,函数内部的作用域就是局部作用域, b. 在函数内部通过var 声明的变量 和 声明式的函数均是该函数的私有变量或函数, c. 一般情况下,

执行上下文环境—JavaScript面向对象高级

#  执行上下文环境 # **定义**:执行函数的时候,会产生一个上下文的对象,里面保存变量,函数声明和this. **作用**:用来保存本次运行时所需要的数据 在产生执行上下文(执行上下文环境)时,浏览器会做以下三个准备工作: 1.提取var 声明的变量,并赋值为 undefined 2.提取声明式函数. 3.给this赋值,指向window或当前对象. 函数每执行一次都会产生一个执行上下文, 因为函数参数不同会有不同的计算结果, ## 全局上下文环境 ## 全局级别的代码,如多个script

javascript面向对象创建高级 Web 应用程序

 目录 JavaScript 对象是词典 JavaScript 函数是最棒的 构造函数而不是类 原型 静态属性和方法 闭包 模拟私有属性 从类继承 模拟命名空间 应当这样编写 JavaScript 代码吗? 展望 最近,我面试了一个有五年 Web 应用程序开发经验的软件开发人员.四年半来她一直在从事 JavaScript 相关的工作,她自认为 JavaScript 技能非常好,但在不久之后我就发现实际上她对 JavaScript 知之甚少.话虽这样说,但我确实没有责备她的意思.JavaScrip

JavaScript 面向对象(三) —— 高级篇

JavaScript 面向对象(一) —— 基础篇 JavaScript 面向对象(二) —— 案例篇 一.json方式的面向对象 首先要知道,js中出现的东西都能够放到json中.关于json数据格式这里推荐一篇博客:JSON 数据格式 先看下json创建的简单对象:相比基础篇中的构造函数.原型等的创建方式,json方式简单方便:但是缺点很明显,如果想创建多个对象,那么会产生大量重复代码,不可取. JSON方式适用于只创建一个对象的情况,代码简介又优雅. 1 <!DOCTYPE html>

JavaScript面向对象之类的继承

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-