面向对象深入解读
<mark id="cgega"><q id="cgega"><caption id="cgega"></caption></q><tt id="cgega"></tt><strike id="cgega"></strike></mark><thead id="cgega"><kbd id="cgega"><kbd id="cgega"></kbd><noframes id="cgega"><bdo id="cgega"><sup id="cgega"><div id="cgega"><bdo id="cgega"></bdo></div></sup></bdo>
<progress id="cgega"><rt id="cgega"></rt><section id="cgega"></section><tbody id="cgega"><label id="cgega"></label></tbody></progress>
  • <video id="cgega"><datalist id="cgega"></datalist><optgroup id="cgega"></optgroup><ol id="cgega"></ol></video><i id="cgega"><legend id="cgega"></legend><strong id="cgega"><ul id="cgega"><param id="cgega"><strong id="cgega"></strong></param></ul></strong></i><bdo id="cgega"><sup id="cgega"><div id="cgega"><bdo id="cgega"></bdo></div></sup></bdo>
    <audio id="cgega"></audio><cite id="cgega"></cite><span id="cgega"></span>

      <abbr id="cgega"><table id="cgega"><dd id="cgega"></dd><fieldset id="cgega"><nav id="cgega"></nav><noframes id="cgega"><span id="cgega"><thead id="cgega"></thead></span>

        面向对象深入解读

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

         

        函数的三种角色

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

        73099威尼斯城73099.com |威尼斯73099.com官方网站登录 |威尼斯手机娱乐官网 | |手机版 | | 澳门威尼斯3544.com,威尼斯3544.com官网登陆,威尼斯3544.com备用网址-0327.com|威尼斯澳门官方6799.com,www.6799.com,威尼斯官方娱乐6799.com登陆-vns566.net|6799.com威尼斯手机版,6799.com威尼斯网址,6799.com威尼斯官网登陆-59859.com|86087威尼斯城86087.com,威尼斯86087.com官方网站登录,威尼斯手机娱乐官网-83855.com|澳门威利斯人手机版,www.86087.com官方入口,澳门威利斯人在线娱乐-944185.com|威尼斯澳门官方4886.com,www.4886.com,威尼斯官方娱乐4886.com登陆-k92988.com|