本文来自我的github 0.前言 这些都是js基础进阶的必备了,有时候可能一下子想不起来是什么,时不时就回头看看基础,增强硬实力。...this指向就那么几种: new 关键字 指向new 创建的对象 function F() { this.name = 1 } var f = new F() call、apply、bind...后,以后无论怎么用call、apply、bind,this指向都不会变,都是第一次bind的上下文 3.从call到继承 首先,js没有严格意义上的子类父类,实现继承是依靠原型链来实现类似于所谓的类的效果...3.1 call继承(构造函数继承) 我们希望G继承F,或者是说,开发的时候,由于G有很多属性继承F我们想偷懒,那么就可以这样 function F(name,age){ this.name = name...因为都有各自的缺陷,所以就有一种组合继承,将构造函数继承和prototype继承混合起来,方法写在父类的prototype上,是比较常见的方法。
0.前言 这些都是js基础进阶的必备了,有时候可能一下子想不起来是什么,时不时就回头看看基础,增强硬实力。...指向就那么几种: new 关键字 指向new 创建的对象 function F() { this.name = 1 } var f = new F() 复制代码 call、apply、bind...后,以后无论怎么用call、apply、bind,this指向都不会变,都是第一次bind的上下文 3.从call到继承 首先,js没有严格意义上的子类父类,实现继承是依靠原型链来实现类似于所谓的类的效果...3.1 call继承(构造函数继承) 我们希望G继承F,或者是说,开发的时候,由于G有很多属性继承F我们想偷懒,那么就可以这样 function F(name,age){ this.name = name...因为都有各自的缺陷,所以就有一种组合继承,将构造函数继承和prototype继承混合起来,方法写在父类的prototype上,是比较常见的方法。
Component, // ... } // 使用 class index extends React.Component{ // ... } React github源码 面试官可以顺着这个问 JS...继承的相关问题,比如: ES6 的 class 继承用 ES5 如何实现。...Child.sayHello(); // hello child.sayName(); // my name is Child child.sayAge(); // my age is 18 如果对JS...推荐阅读JS继承相关的书籍章节 《JavaScript高级程序设计第3版》第6章——面向对象的程序设计 6种继承的方案,分别是原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承...上卷第6章——行为委托和附录A(ES6中的class) 总结 继承对于JS来说就是父类拥有的方法和属性、静态方法等,子类也要拥有。
1.原型链继承 2.构造函数继承 3.组合继承 4.寄生组合继承 5.extends继承 function Animal() { this.name = 'cat' this.msg =...//核心一步 const a = new Dog() a.msg.age = '99' const b = new Animal() 缺点:多个实例对引用类型操作会被篡改 2 构造函数继承...,不能继承原型属性/方法。...3 组合继承: 就是将上两种方法结合起来 function Animal() { this.name = 'cat' this.msg = { age: 9 }...在原型式继承的基础上,增强对象,返回构造函数.
类式继承 1.最常用的继承组合模式 —— 借用构造函数 & 设置原型 // 父类 function Parent(name) { this.name = name;...// 设置原型 继承父类this属性以及父类的原型 Child.prototype = new Parent(); 缺点:父构造函数被调用了两次,从而导致同一个属性会被继承两次(this.name...继承了父类自身的属性 继承了父类的原型属性(方法) 基于上面的问题,如果 Child.prototype 不指向 Parent的实例 new Parent(),而是指向 Parent.prototype...原型继承并不涉及到类,这里的对象都是继承自其他对象。...—— 浅复制 & 深复制 继承的目的是为了实现代码复用,所以一个对象要从另一个对象中获取功能,把目标对象的属性和方法复制过来也是一种方法。
可以使用 call 来实现继承:写一个方法,然后让另外一个新的对象来继承它(而不是在新对象中再写一次这个方法)。...# 示例 # 使用 call 方法调用父构造函数 在一个子构造函数中,可以通过调用父构造函数的 call 方法来实现继承,类似于 Java 中的写法。...使用 apply, 可以只写一次这个方法然后在另一个对象中继承它,而不用在新对象中重复写该方法。 apply 与 call() 非常相似,不同之处在于提供参数的方式。...# Try it bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。...# 描述 bind() 函数会创建一个新的绑定函数(bound function,BF)。
1.0" /> Document // 手写实现 bind...Function.prototype.bind = // Function.prototype.bind ||...getName1 = obj.getName; getName1(); // xiaoming let getName2 = obj.getName.bind...let getName4 = obj.getName.bind(obj, 111)(); // [111] xiaohong let getName5...= obj.getName.bind(obj, 111, 222)(); // [111, 222] iaohong let getName6 = obj.getName.bind
bind的受体是对象,返回的是个新的函数。 我们知道this总是指向调用他的对象。但是有时候我们希望‘固化’这个this。 也就是无论怎么调用这个返回的函数都有同样的this值。...这就是bind的作用。 语法 fun.bind(thisArg[, arg1[, arg2[, ...]]]) 参数 thisArg 当绑定函数被调用时,该参数会作为原函数运行时的 this 指向。...func2(); 例2 注意:bind只生效一次 function f(){ return this.a; } //this被固定到了传入的对象上 var g = f.bind({a:"azerty..."}); console.log(g()); // azerty var h = g.bind({a:'yoo'}); //bind只生效一次!...(this)); } 例4 使用bind可少写匿名函数 Clict Me!
在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的new 到底是干什么的 一、什么是 JS 原型链 我们知道 JS 有对象,比如 var obj =...当我们「读取」 obj.toString 时,JS 引擎会做下面的事情: 看看 obj 对象本身有没有 toString 属性。没有就走到下一步。 看看 obj....如果你的函数调用不是 call 形式, 请将其转换为 call 形式 三、JS 的 new 到底是干什么的?...缺点: 只能继承父类的实例属性和方法,不能继承原型属性/方法 无法实现复用,每个子类都有父类实例函数的副本,影响性能 3、组合继承 组合上述两种方法就是组合继承。...用原型链实现对原型属性和方法的继承,用借用构造函数技术来实现实例属性的继承。
console.log("run"); } let per = new Person(); per.run(); /* 1.js...中继承的终极方法 1.1在子类的构造函数中通过call借助父类的构造函数 1.2将子类的原型对象修改为父类的实例对象 */ // let
js实现继承 经典继承(原型链) 缺点:过多的继承了没用的属性 Grandfather.prototype.lastName = 'zhang' function Grandfather() {...father function Son() { this.hobby = 'game' } var son = new Son() console.log(son); son只想要继承...grandfather的lastName属性,但是由于原型链的关系,造成了son既会继承grandfather自神的东西,grandfather的原型的东西,father自身的东西和father原型上的东西...,造成了不必要的继承 共享原型 本质:重写原型对象 优点:只会继承父的原型,不会继承父原本自带的属性或方法(只有调用new Father()才会继承自身的东西) 缺点:给本身的原型添加属性或方法时,会把继承的那个原型也修改了...) 雏形 本质:重写原型对象 优点:只会继承父的原型,不会继承父原本自带的属性或方法(只有调用new Father()才会继承自身的东西) 缺点:1,这样继承后即使修改了son的原型也不会修改father
类式继承(构造函数) JS中其实是没有类的概念的,所谓的类也是模拟出来的。特别是当我们是用new 关键字的时候,就使得“类”的概念就越像其他语言中的类了。...另外就是类式继承不支持多重继承,而对于原型继承来说,你只需要写好extend对对象进行扩展即可。 组合模式 另外的一种模式,是结合类继承和原型继承的各自优点来进行对父类的继承。...用类式继承属性,而原型继承方法。这种模式避免了属性的公用,因为一般来说,每一个子类的属性都是私有的,而方法得到了统一。这种模式称为组合模式,也是继承类式常用到的一种方法。...从这里,我们也可以看到类继承和原型基础的一些区别。 结论 原型继承比较符合js这种语言的特点。因为它本身就是js强大的原型的一部分。...而类式继承,与其称它为继承方式,毋宁说是一种函数的运用技巧来模拟继承罢了。本文是卤煮的一己之见,错误偏颇在所难免,如果有之,请各位斧正。
js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[, [,.argN]]]]]...bind(thisArg [, arg1 [, arg2, …]]); bind 也是改变某个方法的执行环境,区别也在于第二个参数(也是一个个的参数形式)和“返回值”的特性。 ...如 func.call(func1,var1,var2,var3) 对应的apply写法为:func.apply(func1,[var1,var2,var3]) 对应的bind写法为: func.bind...注1:但IE9(包括IE9)以上的才支持bind 所以,在不支持bind的浏览器上,我们需要模拟一下 Function.prototype.Bind = function(context){ var...(); obj.sayName.Bind(window,'Hello: ',' !')
JS继承机制总结 继承就是子类可以使用父类的所有功能,并且对这些功能进行扩展。 JS继承机制主要为原型链继承、构造函数继承、组合继承、寄生继承、寄生组合继承、原型式继承和混合式继承。...,实现多继承,创建子类实例时,可以向父类传递参数 缺点 只能继承父类实例上的属性与方法,无法继承父类原型上的属性与方法。...缺点 一些引用数据操作的时候会出问题,两个实例会公用继承实例的引用数据类 谨慎定义方法,以免定义方法也继承对象原型的方法重名 无法直接给父级构造函数使用参数 寄生式继承 继承规则 //寄生式继承也没啥东西的...缺点 一些引用数据操作的时候会出问题,两个实例会公用继承实例的引用数据类 谨慎定义方法,以免定义方法也继承对象原型的方法重名 无法直接给父级构造函数使用参数 混合式继承 继承规则 //这个**混入方式继承...**其实很好玩,之前我们一直都是以一个子类继承一个父类,而**混入方式继承**就是教我们如何一个子类继承多个父类的。
方式一:原型链继承特点:实例可继承的属性有:实例的构造函数的属性,父类构造函数属性,父类原型的属性。(新实例不会继承父类实例的属性!)...Child.prototype = new Parent()const c = new Child();console.log(c) // Child { name: 'zs', age: 20 }方式二:借用构造函数继承特点...:可以向父类构造函数传参 缺点:不能继承父类构造函数的原型function Parent(name) {this.name = name}function Child() {Parent.call(this...'lisi')this.age = 20}const c = new Child();console.log(c) // Child { name: 'lisi', age: 20 }方式三:组合式继承...:原型链继承+构造函数继承function Parent(name) {this.name = name}function Child(name) {Parent.call(this, name)this.age
或者说thisObj继承了obj的属性和方法,绑定后会立即执行函数。唯一区别是apply接受的是数组参数,call接受的是连续参数。...实现继承 通过call和apply,可以实现对象继承 var Parent = function(){ this.name = "csxiaoyao"; this.age = 25; }...(child);//Object {name: "csxiaoyao", age: 25} bind obj.bind(thisObj, arg1, arg2, ...); 把obj绑定到thisObj...与call和apply不同的是,bind绑定后不会立即执行。...5, 3)); //function add(j, k){return j+k;} console.log(add.bind(sub, 5, 3)()); //8 如果bind的第一个参数是null或
谁调用当前的属性或者方法的,它就是谁 /* 2.1.bind方法作用 修改函数或者方法中的this为指定的对象, 并且会返回一个修改之后的新函数给我们 注意点...: bind方法除了可以修改this以外, 还可以传递参数, 只不过参数必须写在this对象的后面 */ //call apply bind修改this的...console.log(this); } test(10,20); window.test(); let fn=test.bind...console.log(this); } } let p= new Person(); p.say(); let fn=p.say.bind
特性: fun.bind(thisArg,arg1,arg2,…) 不会立即调用fun函数,会返回一个新的指定了this的函数; bind方法将一个函数的对象上下文从初始的上下文改变为由 thisArg...(obj, 1, 2); // 返回的是一个新的指定了this的函数 newFun(); // 3 4. call()、apply()和bind()的应用 1. call() call 常用来继承,因为...ES6之前没有extends,用构造函数来模拟继承。...下面例子: Son通过改变Father构造函数this指向问题,来获取Father里面的属性,实现继承的效果,Son还可以添加自己的额外属性: function Father(name, age) {...() 如果我们想改变某个函数内部的this指向,但又不需要立即调用该函数,此时用bind: 点击 let
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Do...
前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call、apply、bind的问题,比如… 怎么利用call、apply来求一个数组中最大或者最小值 如何利用call、apply来做继承 apply...所以其实他们干的事从本质上讲都是一样的动态的改变this上下文,但是多少还是有一些差别的.. call、apply与bind的差别 call和apply改变了函数的this上下文后便执行该函数,而bind...67,5,7,6,-8,687);Math.min.apply(Math, arr);Math.min.call(Math, 34,5,3,6,54,6,-67,5,7,6,-8,687); 将伪数组转化为数组 js...Array.prototype.slice.call(arrayLike); 上面arr便是一个包含arrayLike元素的真正的数组啦( 注意数据结构必须是以数字为下标而且一定要有length属性 ) 数组追加 在js...利用call和apply做继承 123456789101112131415 var Person = function (name, age) {this.name = name;this.age =
领取专属 10元无门槛券
手把手带您无忧上云