js-基础 原型链，call/apply

js-基础 原型链，call/apply

如何构成原型链

// 原型链顾名思义就是把原型连成链，写一个原型链的例子理解一下
// Grand.prototype.__proto__ = Object.prototype
// Grand并不是原型链的顶端，Object.prototype是所有对象的最终原型


Grand.prototype.lastName = 'li'
function Grand() {

}
var grand = new Grand();


Father.prototype = grand;
function Father() {
    this.name = 'bai';
    this.fortune = {
        card1 : 'visa'
    }
    this.num  = 100;
}
var father = new Father();


Son.prototype = father;
function Son() {
    this.hobby = 'drink';
}
var son = new Son();
console.log(son.num ++)

原型链的增删改查

原型链的增删改查和原型的增删改查基本上是一致的
删 delete Grand.prototype.lastName. (原型的子孙不能删除，必须通过原型自己去删除）
特例：delete son.fortune.card1
改 同理 删
特例：son.fortune.card2 = ‘master’
增 同理 删

上述特例属于调用引用值修改，属于引用值修改自身，不属于赋值修改，属于调用修改；

Object.create(原型)

var obj = {name:‘a’,age:111};
var obj1 = Object.create(obj)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-52tlNw4h-1584338127719)(media/15629008749156/15634222279896.jpg)]
Object.create() 必须传参
不传参的话在这里插入图片描述
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3bqA0zmQ-1584338127721)(media/15629008749156/15634224363657.jpg)]

绝大多数的对象最终继承自Object.prototype

这么说的原因就是因为有一种特殊情况：
var obj = Object.create(null)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BckOIn2t-1584338127721)(media/15629008749156/15634324437562.jpg)]
这个obj就没有__proto__，没有__proto__肯定就不能继承Object.prototype
就算是手动加上一个__proto__系统也不会认

方法重写

原型链的终端Object.prototype上面有一个toString方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ymFr5xxA-1584338127722)(media/15629008749156/15634333746980.jpg)]

Person.prototype = {
    toString: function() {
        return 'hehe'
    }
}
function Person(){
    
}
var person = new Person()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wg8omW8b-1584338127722)(media/15629008749156/15634333477778.jpg)]
我们在Person.prototype上面重写一个Object.prototype上面有的方法就可以截断它来达到我们自己想要的结果。

系统重写：

• Object.prototype.toString
• Number.prototype.toString
• Arrar.prototype.toString
• Boolean.prototype.toString
• String.prototype.toString

var num = 123;
num.toString()

验证 num.toString() 调用的是Number.prototype.toString重写的方法而不是Object.prototype.toString
我们使用call方法去验证一下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vAJfIr8Z-1584338127723)(media/15629008749156/15634348821771.jpg)]

小知识点：
为什么总是用toString方法来举例?

1. Object.prototype上面有toString的方法
2. 系统方法document.write()在输出结果的时候调用了toString方法

var obj = Object.create(null)
document.write(obj) // ?

var obj = Object.create(null)
obj.toString = function(){
    return '傻傻的调用了假的toString方法'
}
document.write(obj) // ?

call/apply

• 作用 改变this指向
• 区别 后面传参形式不同

// call
function test(){
}
test()
// test() ----> test.call()
// test()执行方法其实就是调用test.call()方法执行的
// call()可以传参数 (第一个参数就是this指向的对象，从第二位按照形参的顺序传）

function Person(name,age){
    this.name = name;
    this.age = age;
}
var person = new Person('罡赫',100);
var obj = {}
Person.call(obj,'泽煜',300)
console.log(obj) //?

借用别人的方法实现自己的功能

function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
function Student(name,age,sex,tel){
    Person.call(this,name,age,sex);
    this.tel = tel;
}
 
var student = new Student('aaa', 12, 'male', 13888888888)

apply 跟 call的区别
call 需要把实参按照形参的个数传进去
apply 需要传一个arguments

function Hub (HubSize, HubStyle){
        this.HubSize = HubSize;
        this.HubStyle = HubStyle;
}
function Frame(lang,width,height){
    this.lang = lang;
    this.width = width;
    this.height = height;
}
function Engine(displacement){
    this.displacement = displacement;
}
function Car (HubSize,HubStyle,lang,width,height,displacement){
    Hub.call(this,HubSize,HubStyle);
    Frame.apply(this,[lang,width,height]);
    Engine.call(this,displacement);
}
var BMW = new Car(130,'炫酷黑',4900,2300,1600,'1.8T')