面向对象深入解读

作者:日期:2018-03-25 19:22:17 点击:468

 

函数的三种角色

第一种角色:普通函数
栈内存(私有作用域)
作用域链
形参
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中的 变量提升¶••⊿作用域¶••⊿闭包 核心原懂得读

红韵彩票开奖走势图 澳洲赛车在线投注 75秒赛车开奖结果 PK10牛牛规则 彩世界彩票平台 北京pk10开奖平台 红韵彩票平台 重庆幸运农场规则 澳洲快乐十分怎么买 PK10牛牛开奖平台