[渡一] 171111 原型链、方法重写、call&apply

最新推荐文章于 2022-05-20 18:43:23 发布
原创 最新推荐文章于 2022-05-20 18:43:23 发布 · 827 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了JavaScript中的原型链概念，包括如何改变默认原型对象，原型链的顶端是Object.prototype。接着讨论了原型方法的重写，解释了中间目标覆盖上游目标的原理，并通过例子说明了如何使用call避免重写带来的影响。最后，阐述了call和apply方法的使用，它们可以改变函数体内this的指向，调整作用域，并对比了两者接收参数的不同方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

tips1.原型链

//一个原型(本身是一个对象)中有两个属性：constructor & __proto__
GrandFather.prototype.lastName = 'deng';

function GrandFather() {
    this.bike = 1;
}
Father.prototype = new GrandFather();

function Father() {
    this.fortune = {
        money: 9999999,
        house: 4 
}
    this.name = "hahah"
    this.girl = 'h1' 
}
Son.prototype = new Father(); //更改了原型

function Son() {
    this.name = 'heihei'
    this.age = 20;
}

var oSon = new Son();
oSon.lastName = 'Chen'; 

// GrandFather.prototype.lastName = 'hong';
var oSon2 = new Son();
console.log(oSon2.lastName);

oSon.__proto__.fortune.house += 1; 
//  Son.prototype.fortune.house += 1;
// Son.prototype.fortune.house += 1;
var oSon2 = new Son();
console.log(oSon2.fortune.house);
console.log(oSon.fortune.money);
oSon.girl = 'h2';
console.log(oSon.girl);
console.log(oSon2.girl);
// oSon.lastName = {
//     name: 'chen'
// }
console.log(oSon.lastName);
console.log(oSon2.lastName);
oSon.fortune = {
    money: 8888888,
    house: 3
} 
// oSon.__proto__.fortune
// Son.prototype.fortune = {
//         money: 8888888,
//         house: 3
//}

// Son.prototype = {
//     name: 'hehe',
//     fortune: {
//         money: 7777777,
//         house: 2
//     }
// }  
var oSon3 = new Son();
console.log(oSon.fortune.house); //3
console.log(oSon3.fortune.house); //5
console.log(oSon2.fortune.house); //5

这里写图片描述

  • 改变默认原型对象
  • oSon.lastname = ‘cherry’ | Oson.fortune = { house = 3} 这些是在oSon对象里添加了新的属性，该行为只与自身有关
  • oSon.fortune.house = ‘4’ 是改变了原型的某一项属性，凡是指向该原型对象，均受影响
  • Son.prototype = {fortune: { house: 2 }} 是更改了原型的指向，在更改前的对象的_proto_指向不变，新建的对象会按照新的原型继承
  • 原型链的顶端都是Object.prototype -> {} | var obj = Object.create(demo) [括号里传参数null（没有原型）或者object（指定原型）] / [obj._proto_== demo]

tips2.原型方法的重写

GrandFather.prototype.lastName = 'deng';
GrandFather.prototype.say = function() {
    console.log('tell me GrandFather');
};

function GrandFather() {
    this.bike = 1;
}
Father.prototype = new GrandFather();

function Father() {
    this.fortune = {
        money: 9999999,
        house: 4 
    }
    this.name = "hahah"
    this.girl = 'h1'
    this.say = function() {
        console.log('tell me father');
    }
}
Son.prototype = new Father(); 

function Son() {
    this.name = 'heihei'
    this.age = 20;
}

var oSon = new Son();
oSon.say();
  • 对象通过原型链从下游向上游寻找目标，若顶端有目标，中间有目标，则使用中间的目标，中间的目标覆盖上游目标。
Object.prototype.toString(); 
//谁调用了这个方法，调用方法的类型就可以输出
var obj = {};
obj.toString(); //[object Object]
var arr = [1, 2, 3];
arr.toString(); //1,2,3  用toString没有实现功能
//arr.constructor(查询构造函数) -> function Array(){[native code]}
//Array.prototype -> toString  方法在下游被重写
  • 原本在原型链顶端的Object.prototype中有目标方法toString();但在搜索过程中下游Array.prototype中重新定义了toString();导致无法实现预想功能
console.log(Object.prototype.toString.call(arr));
  • 使用call来改变this的指向，即‘arr’使用‘Object.prototype.toString’方法而不是默认的‘Array.prototype.toString’

tips3.call&apply

  • 每个函数都包含两个非继承而来的方法：call()方法和apply()方法。

  • 都是在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。

  • 一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变this的指向。

  • 相同点：这两个方法的作用是一样的。

  • 不同点：接收参数的方式不同。

  • apply()方法 接收两个参数，一个是函数运行的作用域（this），另一个是参数数组。

    语法：apply([thisObj [,argArray] ]);，调用一个对象的一个方法，2另一个对象替换当前对象。 
    说明：如果argArray不是一个有效数组或不是arguments对象，那么将导致一个 TypeError，如果没有提供argArray和thisObj任何一个参数，那么Global对象将用作thisObj。

  • call()方法 第一个参数和apply()方法的一样，但是传递给函数的参数必须列举出来。

    语法：call([thisObject[,arg1 [,arg2 [,…,argn]]]]);，应用某一对象的一个方法，用另一个对象替换当前对象。

    说明： call方法可以用来代替另一个对象调用一个方法，call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象，如果没有提供thisObj参数，那么Global对象被用于thisObj。

  • 后面使用前面的功能，后面替换前面的对象

function Person(name, age) {
    //(Person)var this = {
    //name:null,
    //age:null,                       --------------??
    //}
    this.name = name;
    this.age = age;
}

function Student(name, age, myClass) {
    //构造函数，(Student)var this = {
    //myClass:null,
    //name:
    //age:
    //}
    Person.call(this, name, age); //Person.name -> Student.name
    this.myClass = myClass;

}
console.log(new Student('cst', 20, 1));
  • (student)替换了(person)的this，相当于student使用了person的方法
var numObj = {
          x: 1,
          y: 2
}

function add(a, b) {
    console.log(this.x + a + this.y + b);
}
add(3, 4); //NaN  undefined+3+undefined+4
//window.add.call(window) this->window  window里没有x,y
// add.call(numObj, 3, 4); //10
add.apply(numObj, [3, 4]);
  • numObj使用了add中的方法，numObj把自己的属性代入进去
function cat() {}
     cat.prototype = {
         food: "fish",
         say: function() {
             alert("I love " + this.food);
         }
     }
 var blackCat = new cat;
 blackCat.say();
 var whiteDog = {
     food: 'bone',
 }
blackCat.say.call(whiteDog);
//动态改变this,当一个对象没有某个方法，但是其他的有
  • whiteDog使用blackCat的方法，并带着自己的参数‘bone’
window.color = 'red';
document.color = 'yellow';

var s1 = {
    color: 'blue'
};

function changeColor() {
    console.log(this.color);
}

changeColor.call(); //red (默认传递参数)
changeColor.call(window); //red
changeColor.call(document); //yellow
changeColor.call(this); //red      -------------------??
changeColor.call(s1); //blue
var Pet = {
    words: '...',
    speak: function(say) {
        console.log(say + this.words)
    }
}
Pet.speak('Speak'); // 结果：Speak...

var Dog = {
    words: 'Wang'
}

//将this的指向改变成了Dog
Pet.speak.call(Dog, 'Speak'); //结果： SpeakWang
  • Dog使用Pet的方法

[1127追加]： 
tip1：探索普通函数和构造函数内部区别

function test() {
    console.log(this);
    console.log('test');
}
test();
//'this'是 window.this  即函数内部没有创建this对象
//普通函数执行功能

这里写图片描述

function Test() {
//var this = {__proto__:test.prototype}
console.log(this);
console.log('test');
//return this
}
var a = new Test();

//通过new定义函数，是构造函数，通常每个单词首字母大写
//通过new来执行函数，会在函数中默认定义一个this对象，会返回一个对象
//运行结果可以看出'this'并没有输出，是函数内部的this对象

这里写图片描述

function test() {
console.log(this);
console.log('test');
}
test();
test.call(window);

var obj = {
name: 'cst'
}
test.call(obj);


//执行test 相当于test.call(window)  'window' call 'test' 
//括号内第一个参数就决定了前面这个函数中this是谁
//不传参数默认为test.call(window)
//传入参数'obj'  'obj' call 'test' =>(this->obj)=>console.log(obj)

这里写图片描述

function Person(name, age, sex) {
//预编译阶段构造函数 creative new this {}
//预编译后产生this对象，每次执行都新建一个对象，都不是一个this
    this.name = name;
    this.age = age;
    this.sex = sex;
}
var oPerson = new Person(); 
//构造函数的方式运行函数，会创建this对象，执行时this才有意义
function Student(name, age, sex, grade, clas) {
// creative this {} 

// this.name = name;
// this.age = age;
// this.sex = sex;
Person.call(this, name, age, sex); //不传参数默认是window  在此处传实参
this.grade = grade;
this.clas = clas;
//return this;
}
var oStudent = new Student('yp', 18, 'man', 3, 3);



simpleone_
关注
python原型链污染
qq_66013948的博客
07-21 2099
​ python 中的原型链污染是指通过修改对象原型链中的属性，对程序的行为产生以外影响或利用漏洞进行攻击的一种技术。​ 在 Python中，对象的属性和方法可以通过原型链继承来获取。每个对象都有一个原型，原型上定义了对象可以访问的属性和方法。当对象访问属性或方法时，会先在自身查找，如果找不到就会去原型链上的上级对象中查找，原型链污染攻击的思路是通过修改对象原型链中的属性，使得程序在访问属性或方法时得到不符合预期的结果。常见的原型链污染攻击包括修改内置对象的原型、修改全局对象的原型等。
javascript原型链以及继承方式小记
qq_42988627的博客
12-27 650
一、 原型链 每个构造函数都有一个原型对象（prototype），这个原型对象有一个属性（constructor）又指回构造函数，而实例内部又有一个指针（__proto__）指向原型对象，如果原型对象又是另外一个类型的实例，那么这个原型对象内部也会有一个指针（__proto__）指向这个类型的原型对象，当然，这个类型的原型对象也是有一个属性（constructor）指回该类型的构造函数。这样就在实例和原型中构建了一条原型链。 1. 构造函数 ECMAScript 中的构造函数是用于快速创建特定类型对象的，比
JS中~对象重写原型链
qq_64970126的博客
05-20 381
JS中~对象重写原型链 前面在原型对象每添加一个属性和方法就要书写一遍 Person. prototype 。
js之面向对象（原型链、重定向、重写new)
lly193426的博客
08-31 473
一.原型原型链 所有的类都是函数数据类型的（包含内置类） 所有的函数都天生自带一个属性：prototype原型 prototype的属性值默认是一个对象数据类型值【堆】 在对象中存储的是供实例能调用的公共属性和方法 并且在类的原型对象上，默认有一个属性constructor构造函数，属性值是当前类本身 所有对象数据类型值也天生自带一个属性：__proto__原型链 __proto__属性的属性值：当前实例所属类的原型prototype.实例.proto===类.prototype 都哪些值是对象数据类型的
javascript之原型，原型链
AC总有一天的博客
03-02 187
1.定义：原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。 2.利用原型特点和概念，可以提取共有属性。 3.对象如何查看原型 — > 隐式属性 __proto__ 4.对象如何查看对象的构造函数 — > constructor var obj = {name:”a”} va...
渡一教育js- 10原型，原型链，call/apply
weixin_33810006的博客
01-24 306
构造函数唯一特点大驼峰 Person.portotype --原型 是祖先 Person.portotype.name="hehe"; function Person(){ } var person=new Person() 复制代码在访问person 这个对象中，是空的，没有属性的 但是访问person[name] 是有属性的，继承了祖先的属性 如果自己有和原型一样的属性，取自己的，没有的找原型...
重写call()方法
qq_44738564的博客
01-18 613
Function.prototype.myCall = function(ctx){ var ctx = ctx ? Object(ctx) : window; //originFn & test -> 一个内存地址 ctx.originFn = this; //引用 var args = []; //拿到myCall的第二个参数从开始到结束的所有实参列表 for(var i = 1; i < arguments.length; i++){ //args + 字符
js的继承方法小结（prototype、call、apply）（推荐）
10-17
当访问一个对象的属性时，如果该对象自身没有这个属性，那么JavaScript会查找它的原型，如果原型也没有，就继续查找原型的原型，直到找到为止，这就是原型链的工作原理。 ```javascript function Personal(name, ...
浅谈javascript原型链与继承
10-23
原型链是JavaScript实现继承的机制，它允许一个对象访问另一个对象的属性和方法。继承是指新创建的对象可以继承其原型对象的属性和方法。下面详细探讨这两个概念。 **原型链** 在JavaScript中，每个对象都有一个...
JS_Function_Override:js部分方法重写
05-25
因此，当我们在对象上调用一个方法时，JavaScript会首先在对象本身查找该方法，如果没有找到，它会沿着原型链向上查找，直到找到该方法或者到达原型链的顶端（即`null`）。 函数重写就是通过在原型上定义新的同名...
JS基础--子类型重写超类型方法原型链图解
yilia学习小园
05-06 916
首先我们创建一个父类： // 创建一个父类构造函数 function Parent () { this.parentProperty = '父类属性'; } // 为父类添加一个原型方法 Parent.prototype.getParentProperty = function () { return this.parentProperty; } 此时的原型链是这样的： 接下来创建一个子类...
重写apply()方法
qq_44738564的博客
01-18 439
var obj = { a: 'xiao', b: 'hong' } function test(){ console.log(this, arguments); } Function.prototype.myApply = function(ctx, args){ var ctx = ctx ? Object(ctx) : window; ctx.originFn = this; //如果不是object && fn , 证明时原始值抛出异常 if
使用prototype实现js继承以及重写方法(图解)
csy101的博客
05-15 1522
原型链继承：子类的原型指向父类的实例 通过改变子类的prototype来实现 function Animal(name) { this.name = name this.eat = function () { console.log(this.name + ' is eating ') } } Animal.prototype.say =
原生JavaScript进阶训练---重写call方法
CreatorRay的博客
03-12 840
码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。 之前的系列中，跟着大家重写了数组常用的一些内置方法，今天给大家重写一下call方法，这个也是面试非常非常频繁出现的考察点。 首先按照惯例我们看一下原生的call方法的使用： function test () { console.log(typeof(this)); console.log(this); console.log(arguments) }.
深入学习之重写call方法
测试0901-1
07-19 645
 
重写 js 里的 apply、call、bind 和 new 方法
猛一回头的博客
06-02 540
用了这么久的这些方法以后，特别想深究其实现原理，所以在参考了很多资料以后，试着自己再手写一遍，记录在此，方便以后查找、回忆，或者帮助别人理解这些方法。 1、apply方法： Function.prototype.myApply=function（）{ let f = this; if(typeof f !== 'function'){ throw new TypeError('error'); } let arg = [...arguments].slice(1).shift();//1、类数组
call、apply、bind重写
h1326687396的博客
04-17 185
call重写 //call重写 Function.prototype.call2=function(_this,...args){ //获取当前的函数体 let fun=this //获取传入的执行上下文 let ctx=_this // 在执行上下文执行函数 ctx.myfun=fun let res=ctx.myfun(...args) delete ctx.myfu
深入理解JavaScript函数call方法实现原理
4. Function.prototype.call实现：在JavaScript中，可以通过重写Function.prototype.call方法，为所有的函数实例提供自定义的this绑定逻辑。这是基于JavaScript原型链继承的特性实现的。 5. 原型链继承：JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值