ECMAScript的核心语言 （二）类和模块 【 call() apply() 原型prototype 】

js-笔记

call() 和 apply()： 改变this的指向

注意： call与apply功能一致、继承性一致

两者区别：第二参数形式不一样

1、 改变this指向：

var username = 'win';
var age = 100;
var obj = {
    username:'abc',
    age:12,
    show:function(){
        console.log(this.username + '今年' + this.age + '岁');
    }
}
var obj1 = {
    username:'www',
    age:18
}
function Show(){
    this.username = 'aaa';
    this.age = 10;
}
obj.show();                         // 返回 abc今年12岁
// call() 改变this的指向：
    obj.show.call();                // 返回 win今年100岁；没有参数，相当于this指向window
    obj.show.call(obj1);            // 返回 www今年18岁； 此时this指向obj1
    obj.show.call(new Show());      // 返回 aaa今年10岁； 此时this指向Show
// apply() 改变this的指向：
    obj.show.apply();               // 返回 win今年100岁；没有参数，相当于this指向window
    obj.show.apply(obj1);           // 返回 www今年18岁； 此时this指向obj1
    obj.show.apply(new Show());     // 返回 aaa今年10岁； 此时this指向Show

2、 继承性：

function Demo(){
    this.username = 'www';
    this.age = 18;
    this.show = function(){
        console.log(this.username + '今年' + this.age + '岁');
    }
}
function ShowCall(){
    Demo.call(this);    // 通过call()进行继承
}
function ShowApply(){
    Demo.apply(this);   // 通过apply()进行继承
}
// 通过call()继承的结果
    var show_call = new ShowCall();
    console.log(show_call.username);    // 返回 www；继承了Demo的username
    console.log(show_call.age);         // 返回 18；继承了Demo的age
    show_call.show();                   // 返回 www今年18岁
// 通过apply()继承的结果
    var show_apply = new ShowApply();
    console.log(show_apply.username);   // 返回 www；继承了Demo的username
    console.log(show_apply.age);        // 返回 18；继承了Demo的age
    show_apply.show();                  // 返回 www今年18岁

3、 第二个参数的形式不同：

call : call(this,user,age);
apply : apply(this,[user,age]);

例子：

function Tow(user,age){
    this.username = user;
    this.age = age;
    this.show = function(){
        console.log(this.username + '今年' + this.age + '岁');
    }
}
function ShowCallT(user,age){
    Tow.call(this,user,age);      // call() 第二参数形式
}
function ShowApplyT(user,age){
    Tow.apply(this,[user,age]);   // apply() 第二参数使用数组形式
}
// call()
    var show_call_T = new ShowCallT('www',18);
    console.log(show_call_T.username);    // 返回 www
    console.log(show_call_T.age);         // 返回 18
    show_call_T.show();                   // 返回 www今年18岁
// apply()
    var show_apply_T = new ShowApplyT('www',18);
    console.log(show_apply_T.username);   // 返回 www
    console.log(show_apply_T.age);        // 返回 18
    show_apply_T.show();                  // 返回 www今年18岁

4、 就近原则：

var index = 'a';
function demo(){
    var index = 'b';
    console.log(index);
}
demo();         // 返回 b，优先使用局部变量
demo('abc');    // 返回 b；形参类似于局部变量，同时出现就近原则

原型：

对象的原型 prototype：

-- 让公用的方法或者属性在内存中只存在一份

-- 每个函数在创建的时候都自动添加了prototype属性，这就是函数的原型

-- 原型也是对象

-- prototype是函数的内置属性 --作用于构造函数

通过new Array() 创建的对象的原型是 Array.prototype

通过new Date() 创建的对象的原型是 Date.prototype

通过直接量设置的对象 var a = true; 原型是 a.constructor.prototype

例子：

function Info(name,age){
    this.name=name;
    this.age = age;
}
// 把方法添加到原型上
Info.prototype.test = function(){
    console.log('ceshi');
}
var info1 = new Info('www',18);
var info2 = new Info('abc',12);
console.log(info1.test == info2.test);  // 返回 true，让公用的方法或者属性在内存中只存在一份
console.log(info2.constructor);  // 返回 函数： function Info(name,age){ this.name=name; this.age = age;}

原型作用于构造函数：

访问的优先级：先访问自己的属性，如果没有往上查找执行，直到Object.prototype;

1、 给数组添加一个方法或者属性

Array.prototype.test = function(){
    console.log('ceshi');
}
var arr = new Array(1,2,3);
arr.test();             // 返回 ceshi
['a','b','c'].test();   // 返回 ceshi
// 修改test
arr.test = function(){
    console.log('你好');
}
arr.test();    返回 你好

2、 给Object添加一个方法或者属性，使所有的对象有具有test方法

Object.prototype.test=function(){
    console.log('ceshi');
}
'abc'.test();      // 返回 ceshi
[1,2,3].test();    // 返回 ceshi
true.test();       // 返回 ceshi

获取对象的原型：

1、 constructor.prototype

console.log('abc'.constructor.prototype);   // 返回 String {}

2、 Object.getPrototypeOf() ： ES5提供的新方法

console.log(Object.getPrototypeOf('abc'));  // 返回 String {}
console.log(Object.getPrototypeOf([]));     // 返回 Array[0]
console.log(Object.getPrototypeOf(true));   // 返回 Boolean {}

原型链：

JavaScritp引擎在访问对象的属性时，如果在对象本身中没有找到，则会去原型链中查找，如果找到，直接返回值，如果整个链都遍历且没有找到属性，则返回undefined.

1、 原型的继承：

function User(){}  构造函数
function Muser(){} 构造函数
Muser.prototype = new User();  // 继承
var obj = new Muser();    // 同时具有User和Muser的属性和方法

例子：

// 定义一个武器
    function Weapon(){
        this.type = '武器';
    }
// 定义剑
    function Sword(){
        this.size = '150cm';
        this.style = '刺';
    }
// 定义刀
    function Knife(){
        this.size = '170cm';
        this.style = '砍';
    }
// 剑继承武器、 刀继承武器
    Sword.prototype = new Weapon(); 
    Knife.prototype = new Weapon(); 
// 定义一个倚天剑
    function Yitian(){
        this.hert = '12000';
        this.teji = '吸血';
        this.sex = '女士专用';
    }
// 定义一把屠龙刀
    function Tulong(){
        this.hert = '800';
        this.teji = '暴击';
        this.sex = '男士专用';
    }
// 倚天剑继承剑、屠龙刀继承刀
    Yitian.prototype = new Sword(); 
    Tulong.prototype = new Knife();
// 得到倚天剑
    var yitian = new Yitian();
    console.log('倚天剑伤害：' + yitian.hert + ', 特技:' + yitian.teji + ', 攻击方式：' + yitian.style);  // 返回 倚天剑伤害：12000, 特技:吸血, 攻击方式：刺
// 得到屠龙刀
    var tulong = new Tulong();
    console.log('倚天剑伤害：' + tulong.hert + ', 特技:' + tulong.teji + ', 攻击方式：' + tulong.style);  // 返回 屠龙刀伤害：800, 特技:暴击, 攻击方式：砍

2、 proto ： 不是一个标准属性；不推荐使用

console.log('abc'.__proto__);               // 返回String {}，IE不支持

原型中的this(本对象)：

-- 调用方法的那个对象

给数字Number添加一个方法

Number.prototype.add = function(){
    return this*2; // 直接修改
}
console.log((100).add());  // 返回 200
console.log((200).add());  // 返回 400

给数组添加一个字符串拼接的方法(原型)

Array.prototype.add = function(){
    var newArray = [];
    for(var i=0;i<this.length;i++){
        newArray[i] = this[i]
    }
    return newArray;
}
console.log(['a','b','c','d'].add());   // 返回 ["a", "b", "c", "d"]
console.log([1,2,3].add());             // 返回 [1, 2, 3]

数组去重(原型)

Array.prototype.unique = function(){
    var newArray = [];
    for(var i = 0;i < this.length; i++){
        if(newArray.indexOf(this[i]) == -1){
            newArray.push(this[i]);
        }
    }
    return newArray;
}
console.log([].unique());               // 返回 []
console.log([1,1,2,2,4,4].unique());    // 返回 [1, 2, 4]

作者 wendy
2019 年 5月 23日

参考文献

JavaScript 中 call()、apply()、bind() 的用法