面向对象深入解读

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

 

函数的三种角色

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