默认绑定
默认绑定就是独立函数调用,可以理解为用window调用了这个函数只不过没有加.所以独立函数调用中this为window
< script>
function fn ( ) {
console. log ( this ) ;
}
fn ( ) ;
< / script>
独立函数调用,把对象内的方法地址传给外部变量,通过外部变量加()调用对象里面的方法,此时方法里的this表示的是window
< script>
let obj = {
name: 'cc' ,
run: function ( ) {
console. log ( this ) ;
}
}
let c = obj. run;
c ( ) ;
< / script>
隐式绑定
通过对象.方法名+()调用对象内部的方法,方法中出现的this就看.前面的是谁,this就代表了谁。
< script>
let obj = {
name: 'cc' ,
run: function ( ) {
console. log ( this ) ;
}
}
obj. run ( ) ;
< / script>
显示绑定
函数也是对象 上面有几个默认的方法 通过call apply bind 可以改变this指向 使用方法:想要改变this指向的函数名.call(想要指向的东西); 使用方法:想要改变this指向的函数名.apply(想要指向的东西); 使用方法:想要改变this指向的函数名.bind(想要指向的东西); 注意: call 和 apply 不仅可以显示绑定this 而且还会让函数执行 call 会将传入想要指向的东西 包装成一个新的对象返回 bind 显示绑定this 不会让函数执行 返回一个绑定this 之后新函数 call显示绑定
< script>
function fn ( ) {
console. log ( this ) ;
console. log ( 'fn---' ) ;
}
var obj2 = '修狗' ;
let obj = fn. call ( '修狗' ) ;
< / script>
< script>
function fn ( ) {
console. log ( 'fn---' ) ;
console. log ( this ) ;
}
var obj = {
name: '修狗'
}
fn. apply ( obj) ;
< / script>
< script>
function fn ( ) {
console. log ( this ) ;
console. log ( 'fn---' ) ;
}
var obj2 = {
name: 'xq'
}
let newFn = fn. bind ( obj2) ;
newFn ( ) ;
< / script>
< script>
function fn ( ) {
console. log ( 'fn---' ) ;
console. log ( this ) ;
}
fn. apply ( 'hello' ) ;
fn. call ( null ) ;
fn. call ( undefined) ;
fn. call ( 10 ) ;
fn. call ( 'world' ) ;
< / script>
new绑定
使用new创建一个对象 第一步这个new会在类中生成一个空的对象(堆) 第二步这个new中会生成一个this 这个this指向了这个堆 第三步使用类生成的这个对象也会指向这个堆
< script>
function Person ( name, age) {
this . name = name;
this . age = age;
}
let cc = new Person ( )
cc. name = '陈城' ;
cc. age = 21 ;
console. log ( cc) ;
let gh = new Person ( '高涵' , 22 ) ;
console. log ( gh) ;
< / script>
< script>
function Hero ( name, age) {
this . name = name;
this . age = age;
}
let superMan = new Hero ( '超人' , 24 ) ;
console. log ( superMan) ;
< / script>
< div id= "box" > 点我< / div>
< script>
var box = document. getElementById ( 'box' ) ;
box. onclick = function ( ) {
console. log ( this ) ;
}
< / script>
规则优先级
默认规则的优先级最低 显示绑定优先级高于隐式绑定 new绑定优先级高于隐式绑定 new绑定优先级高于隐式绑定 new绑定优先级高于bind new绑定和call、apply是不允许同时使用 new绑定可以和bind一起使用,new绑定优先级更高
< script>
function fn ( ) {
console. log ( this ) ;
}
var gn = fn. bind ( { name: 'wc' } ) ;
gn ( ) ;
var kn = new gn ( ) ;
< / script>
忽略显示绑定
如果在显示绑定中,我们传入一个null或者undefined,那么这个显示绑定会被忽略,使用默认规则
< script>
function fn ( ) {
console. log ( this ) ;
}
fn. apply ( { name: 'wc' } )
fn. apply ( null ) ;
fn. apply ( undefined) ;
var gn = fn. bind ( null ) ;
gn ( ) ;
< / script>
间接函数引用
< script>
var obj = {
name: 'wc' ,
fn: function ( ) {
console. log ( this ) ;
}
}
var obj2 = {
name: 'xq'
} ;
; ( obj2. gn = obj. fn) ( ) ;
; ( function ( ) { console. log ( this ) ; } ( ) )
< / script>
箭头函数
< script>
var fn1 = function ( a, b) {
return a + b;
}
var fn2 = ( a, b) => {
return a + b;
}
console. log ( fn2 ( 1 , 2 ) ) ;
< / script>
< script>
var fn3 = a => {
return num * 10 ;
}
console. log ( fn3 ( 10 ) ) ;
< / script>
< script>
var fn = num=> console. log ( num+ 100 ) ;
fn ( 100 ) ;
< / script>
< script>
var fn = num=> num* 10 ;
console. log ( fn ( 1 ) ) ;
< / script>
< script>
var fn = function ( ) {
return { name: 'wc' }
}
var fn = ( ) => ( { name: 'wc' } )
< / script>
箭头函数中this指向
< script>
var fn = ( ) => {
console. log ( this ) ;
}
fn. call ( 'hello' ) ;
fn. apply ( null ) ;
fn. apply ( undefined) ;
< / script>
< script>
var fn = ( ) => {
console. log ( this ) ;
}
fn ( ) ;
var obj = { name: 'cc' } ;
fn. call ( obj) ;
< / script>
< script>
var obj = {
name: 'cc' ,
fn: ( ) => {
console. log ( this ) ;
}
}
obj. fn ( ) ;
< / script>
this练习题
< script>
let obj = {
name: 'cc' ,
run: function ( ) {
console. log ( this ) ;
}
}
let c = obj. run ( ) ;
c ( ) ;
< / script>
< script>
function fn1 ( ) {
console. log ( this ) ;
}
let obj = {
name: 'cc' ,
play: fn1
}
obj. play ( ) ;
< / script>
< script>
let name = 'xx'
let obj = {
name: 'cc' ,
running: function ( name) {
console. log ( this . name + '爱跑步' ) ;
} ,
codding: function ( name) {
console. log ( this . name + '爱代码' ) ;
}
}
obj. running ( ) ;
obj. codding ( ) ;
< / script>
< script>
var obj = {
name: 'cc' ,
fn: function ( ) {
console. log ( this ) ;
}
}
var obj2 = {
name: 'gh' ,
gn: obj. fn
}
obj2. gn ( ) ;
< / script>
< button id= "box" > 点击< / button>
< script>
let btn = document. getElementById ( "box" ) ;
function f ( ) {
console. log ( this ) ;
}
btn. onclick = f ( ) ;
< / script>
< button id= "box" > 点击< / button>
< script>
let btn = document. getElementById ( "box" ) ;
function f ( ) {
return function ( ) {
console. log ( this )
}
}
btn. onclick = f ( ) ;
< / script>
< script>
let wc = {
name: "wangcai" ,
age: 100 ,
eat: function ( ) {
console. log ( "eat..." )
console. log ( this ) ;
}
}
wc. eat ( ) ;
< / script>
< script>
let wc = {
name: "wangcai" ,
age: 100 ,
eat: function ( ) {
console. log ( "eat..." )
console. log ( this ) ;
}
}
let mm = wc. eat;
mm ( ) ;
< / script>
< script>
var num = 10 ;
var obj = {
num: 20
}
obj. fn = ( function ( num) {
this . num = num * 3 ;
num++ ;
console. log ( num) ;
return function ( n) {
this . num += n;
num++ ;
console. log ( num)
}
} ) ( obj. num) ;
var fn = obj. fn;
fn ( 5 )
console. log ( window. num) ;
< / script>
< script>
var num = 10 ;
var obj = {
num: 20
}
obj. fn = ( function ( num) {
this . num = num * 3 ;
num++ ;
console. log ( num) ;
return function ( n) {
this . num += n;
num++ ;
console. log ( num)
}
} ) ( obj. num) ;
obj. fn ( 10 ) ;
console. log ( num)
console. log ( window. num)
console. log ( obj. num)
< / script>
< script>
( function ( ) {
var a = 1 ;
var obj = {
a: 10 ,
f: function ( ) {
a *= 2 ;
}
}
obj. f ( )
alert ( obj. a + a) ;
} ) ( )
< / script>
< script>
( function ( ) {
var a = 1 ;
var obj = {
a: 10 ,
f: function ( ) {
this . a *= 2 ;
console. log ( this . a)
}
}
obj. f ( )
} ) ( )
< / script>
< script>
var name = "window" ;
var Wangcai = {
name: "Wangcai" ,
show: function ( ) {
console. log ( this . name) ;
} ,
f: function ( ) {
var fun = this . show;
fun ( ) ;
}
}
Wangcai. f ( ) ;
< / script>
< script>
var fullname = "language" ;
var obj = {
fullname: "javascript" ,
props: {
getFullName: function ( ) {
return this . name;
}
}
}
console. log ( obj. props. getFullName ( ) ) ;
< / script>
< script>
var fullname = "language" ;
var obj = {
fullname: "javascript" ,
props: {
fullname: "hello" ,
getFullName: function ( ) {
return this . fullname;
}
}
}
console. log ( obj. props. getFullName ( ) ) ;
< / script>
< script>
var fullname = "language" ;
var obj = {
fullname: "javascript" ,
props: {
fullname: "hello" ,
getFullName: function ( ) {
return this . fullname;
}
}
}
let qq = obj. props. getFullName;
console. log ( qq ( ) ) ;
< / script>
< script>
let obj = {
fn: ( function ( ) {
console. log ( this ) ;
return function ( ) {
console. log ( this ) ;
}
} ) ( )
}
obj. fn ( ) ;
< / script>
< script>
let obj = {
fn: ( function ( ) {
console. log ( this )
return function ( ) {
console. log ( this )
}
} ) ( )
}
let qq = obj. fn;
qq ( ) ;
< / script>