JavaScript面向对象和高级06

函数四种调用模式

1 函数四种调用模式介绍

• 1 函数模式
• 2 方法模式
• 3 构造器模式
• 4 上下文模式

以上唯一不同的就是 this，难点也是：this

• 函数调用模式

定义的函数，如果单独调用，不将其与任何对象关联，那么就是函数调用模式

• 方法调用模式

定义的函数, 如果将函数作为一个对象的成员，那么利用对象调用它就是方法模式

• 构造器模式

定义的函数, 使用 new 来调用创建对象就是构造器( constructor )模式

1.1 以上三种调用模式的区别

函数调用模式中的 this 指的是 全局对象（window）方法调用模式中的 this 指的是 调用方法的对象构造器模式  中的 this 指的是 新创建出来的对象

1.2 面试题分析

// 1var age = 38;var obj = {    age: 18,    getAge: function() {        console.log(this.age); // 18    }};obj.getAge();// 2var age = 38;var obj = {    age: 18,    getAge: function() {        function foo() {            console.log(this.age); // 38        }        foo();    }};obj.getAge();// 2的变式var age = 38;var obj = {    age: 18,    getAge: function() {        alert(this.age);    }};var f = obj.getAge;f(); // 38// 3var length = 10;function fn(){    console.log(this.length);}var obj = {    length: 5,    method: function (fn) {        fn();   // 10        arguments[0](); // 2    }};obj.method(fn, 123);// 4var foo = {    bar: function() {        return this.baz;    },    baz: 1};var a = (function() {    return arguments[0]();})(foo.bar);console.log(a); // undefined

1.3 构造器模式的特点

• 1 this
• 2 返回值

构造函数中的 this ，指向了新创建出来的对象。构造函数中，如果没有 return 默认就是返回当前对象, 即 this如果有 return1> 如果 return 后面是 基本数据类型 忽略, 和没写一样2> 如果 return 后面是一个有效的引用类型, 那么无论构造函数中写什么内容     都返回 return 后面的对象

1.3.1 构造函数新的用法

var createPerson = function(name) {    return {        get_name: function() {            return name;        }    };};// 原来调用方式（工厂模式）var p1 = createPreson();// 使用new （寄生模式）var p2 = new createPerson();

1.4 上下文调用模式

在函数调用模式中 函数模式, 方法模式 与 构造器模式 this 都是固定的上下文（环境）特点：在上下文调用模式中, this 由上下文决定，上下文可以在调用时指定。有两种调用方法1> 函数名.apply( ... );2> 函数名.call( ... );

• 上下文模式可以模拟几种调用方式？

function foo() {}// 此时跟函数模式调用相同foo.apply();foo.apply(null);var obj = {};// 此时跟方法调用模式相同foo.apply(obj);

• apply 参数

第一个参数：指定 this 的对象，表示指定方法中的 this 第二个参数：是一个数组（或者伪数组），表示传给调用方法的参数。其中的数组中的每一个元素将作为单独的参数传给函数

• 练习1（不含this的情况）：

1 写一个没有参数的函数，分别使用三种方式进行调用function foo() {    console.log("qianqian");}2 写一个有参数的函数，分别使用三种方式进行调用function func(word) {    console.log(word);}

• 练习2（包含this的情况）

var num1 = 456;function foo() {    console.log(this.num1);}var o = {num1: 999};

1.4.1 上下文调用模式应用

• 案例：求一个数组中的最大值

var arr = [9, 1, 4, 10, 7, 22, 8];

• 案例：将传入的参数打印，参数之间用-相互连接

function foo() {    // }foo(1, 3, , "abc", "ffff", 99) // 1-3-abc-ffff-99

• 案例：给页面上所有的 div 和 p 标签添加背景色

// 给页面上所有的 div 和 p 标签添加背景色var divs = document.getElementsByTagName('div');var ps = document.getElementsByTagName('p');// divs 与 ps 都是伪数组, 但是需要执行数组的方法var list = [];list.push.apply( list, divs );list.push.apply( list, ps );// “高级”应用// var list = [].concat.apply( [].slice.apply( ps ), divs );for ( var i = 0; i < list.length; i++ ) {    list[ i ].style.backgroundColor = 'yellow';}

1.4.2 call 方法

call 方法与 apply 方法完全一样, 只是在调用参数的时候不需要使用数组

foo.call(o1, 1, 2, 3);

2 继承补充

JavaScript中的继承：自己没有，别人有，拿过来，自己就有了。

2.1 借用构造函数继承

function Person(name, age) {    this.name = name;    this.age = age;}Student.prototype = new Person();function Student(name, age, score) {    Person.call(this, name, age);    this.score = score;}

3 ES5补充 （存在兼容性问题）

JavaScript 在用的版本：ES3    v3ES5    v5ES6( ES2015 ) v6

3.1 严格模式

• 注意点：要放在当前作用域的最上边
• 语法：

"use strict";

• 常见的几个不符合严格模式的用法：

1 使用 不用var声明的变量2 delete 变量3 在语句块中使用函数声明4 eval 功能受到限制5 this的指向也有变化

严格模式 严格模式和非严格模式

3.2 getter和setter 语法糖

• 语法

get 属性名() {}set 属性名(v) {}

// 使用getter 和 setterfunction Person(name) {    return {        get name() {            return name;        },        set name(v) {            name = v;        }    };}var p = new Person("jim");console.log(p.name);p.name = "tom";console.log(p.name);

3.2.1 实现只读属性

// 只读属性function Person(name) {    return {        get name() {            return name;        }    };}var p = new Person("jim");p.name = "tom";console.log(p.name);

3.3 数组的方法

forEach： 让数组的每一项都执行一次给定的函数。arr.forEach(function(curValue, index) {});示例：var arr = [1,2,3,4,5,6];arr.forEach(function(curValue, index) {    console.log("索引号：" + index + " 对应的值为：" + curValue);});map：返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。示例：var returnNewArr = arr.map(function(curValue, index) {    return curValue * 2;});reduce / indexOf