面向對象深入解讀

作者:日期:2018-03-25 19:22:17 點擊:673

 

函數的三種角色

第一種角色:普通函數
棧內存(私有作用域)
作用域鏈
形參
arguments
return

第二種角色:類

實例
私有和公有屬性
prototype
__proto__

第三種角色:普通對象
鍵值對操作

三種角色之間沒有直接的關系

1.function Fn(){
2. var name='珠峰培訓';
3. this.age=8;
4.}
5.Fn.prototype.say=function(){}
6.Fn.eat=function(){}
7.var f = new Fn();

Alt text

阿里超經典面試題(有難度)

1.function Foo() {
2. getName = function () {
3. console.log(1);
4. };
5. return this;
6.}
7.Foo.getName = function () {
8. console.log(2);
9.};
10.Foo.prototype.getName = function () {
11. console.log(3);
12.};
13.var getName = function () {
14. console.log(4);
15.};
16.function getName() {
17. console.log(5);
18.}
19.
20.Foo.getName();
21.getName();
22.Foo().getName();
23.getName();
24.new Foo.getName();
25.new Foo().getName();
26.new new Foo().getName();

Alt text

call apply bind

都是天生自帶的方法(Function.prototype),所有的函數都可以調取這三個方法
三個方法都是改變THIS指向的

call

fn.call(context,para1,…)
把fn方法執行,并且讓fn方法中的this變為context,而para1…都是給fn傳遞的實參

1.//=>非嚴格模式
2.function fn(num1,num2){
3. console.log(this);
4.}
5.var obj={fn:fn};
6.fn();//=>this:window
7.obj.fn();//=>this:obj
8.
9.var opp={};
10.//opp.fn();//=>報錯:opp中沒有fn這個屬性
11.fn.call(opp);//=>this:opp num1&&num2都是undefined
12.fn.call(1,2);//=>this:1 num1=2 num2=undefined
13.fn.call(opp,1,2);//=>this:opp num1=1 num2=2
14.
15.//->CALL方法的幾個特殊性
16.fn.call();//=>this:window num1&&num2都是undefined
17.fn.call(null);//=>this:window
18.fn.call(undefined);//=>this:window
1.//=>JS嚴格模式下
2."use strict";
3.fn.call();//=>this:undefined
4.fn.call(undefined);//=>this:undefined
5.fn.call(null);//=>this:null

apply

apply的語法和call基本一致,作用原理也基本一致,唯一的區別:apply把傳遞給函數的實參以數組形式存放(但是也相當于在給函數一個個的傳遞實參值)

1.fn.call(null,10,20,30);
2.fn.apply(null,[10,20,30]); //=>傳遞給fn的時候也是一個個的傳遞進去的

bind

也是改變THIS的方法,它在IE6~8下不兼容;它和call(以及apply)改變this的原理不一樣

1.fn.call(opp,10,20); //=>把fn執行,讓fn中的this變為opp,并且把10&&20分別傳遞給fn
2.
3.fn.bind(opp,10,20); //=>預先讓fn中的this指向opp,并且把10和20預先傳遞給fn,此時的fn沒有被執行(只有當執行的時候this和實參才會起到應有的作用)
4.
5.
6.//=>需求:點擊box這個盒子的時候,需要執行fn,并且讓fn中的this指向opp
7.oBox.onclick=fn; //=>點擊的時候執行了fn,但此時fn中的this是oBox
8.
9.oBox.onclick=fn.call(opp); //=>綁定事件的時候就已經把fn立即執行了(call本身就是立即執行函數),然后把fn執行的返回值綁定給事件
10.
11.oBox.onclick=fn.bind(opp);
12.//=>fn.bind(opp):fn調取Function.prototype上的bind方法,執行這個方法返回了一個匿名函數
13./*
14. * function(){
15. * fn.call(opp);
16. * }
17. */
18.oBox.onclick=function(){
19. //=>this:oBox
20. fn.call(opp);
21.}

思考題

1.function fn1(){
2. console.log(1);
3.}
4.function fn2(){
5. console.log(2);
6.}
7.fn1.call(fn2);
8.fn1.call.call.call(fn2);
9.Function.prototype.call(fn2);
10.Function.prototype.call.call.call(fn2);

上一篇: Ajax基礎知識

下一篇: JS中的 變量提升、作用域、閉包 核心原理解讀

我要看A级毛片_多多屋影院,中文字幕国产在线播放,日本近親倫亂中文字幕AV視頻 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>