继承和函数

最新推荐文章于 2021-12-13 17:02:57 发布
最新推荐文章于 2021-12-13 17:02:57 发布
阅读量217 收藏
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42306249/article/details/117266586
版权

文章目录

继承

对象继承

对象拷贝 for…in

// 封装一个对象之间继承的函数
 function extend(parent, child) {
   for (var k in parent) {
     // 子级有的属性不需要继承
     if (child[k]) {
       continue;
     }
     child[k] = parent[k];
   }
 }
 // 调用函数实现继承
 extend(laoli,xiaoli);

原型继承

 // 封装的构造函数就是用来创建一类对象
 // 继承指的是 类型 和 类型之间的继承
 // 人类类型
function Person(name,age,sex) {
   this.name = name;
   this.age = age;
   this.sex = sex;
 }
 // 学生类型
 function Student(score) {      
   this.score = score;
 }
 // 老师类型
 function Teacher(salary) {
   this.salary = salary;
 }
 // 原型对象，可以将自己的属性和方法继承给将来的实例对象使用
 Student.prototype = new Person("zs",18,"男");
 Student.prototype.constructor = Student;
 // 生成一个实例
 var s1 = new Student(89);
 var s2 = new Student(100);
 console.dir(s1);
 console.dir(s2);
 console.log(s1.name);
 console.log(s1.constructor);

构造函数继承(属性和方法)

属性

// 构造函数的属性的继承
// 人类类型
function Person(name,age,sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}
// 学生类型
function Student(name,age,sex,score) {
  // 直接对父类型的构造函数进行一个普通调用
  // Person 普通调用过程中，内部的 this 指向的是 window
  // 可以通过 call 方法更改Person 内部的 this
  Person.call(this,name,age,sex); 
  this.score = score;
}
// 老师类型
function Teacher(name,age,sex,salary) {
  Person.call(this,name,age,sex); 
  this.salary = salary;
}
// 创建学生的实例对象
var s1 = new Student("zs",18,"男",89);
var s2 = new Student("ls",19,"男",92);
console.dir(s1);
console.dir(s2);

方法

// 构造函数的属性的继承
// 人类类型
function Person(name,age,sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}
// 父类型的原型对象中有方法也需要继承
Person.prototype.sayHi = function () {
  console.log("你好");
};
// 学生类型
function Student(name,age,sex,score) {
  Person.call(this,name,age,sex); 
  this.score = score;
}

Student.prototype = new Person();
Student.prototype.constructor = Student;

// 创建学生的实例对象
var s1 = new Student("zs",18,"男",89);
var s2 = new Student("ls",19,"男",92);

s1.sayHi();

组合继承

属性在构造函数内部继承，方法通过原型继承

 // 组合继承：属性在构造函数内部继承，方法通过原型继承
 function Person(name,age) {
    this.name = name;
    this.age = age;
  }
  Person.prototype.sayHi = function () {
    console.log("你好");
  }
  // 生成一个子类型
  function Teacher(name,age,salary) {
    // 继承父类的属性
    Person.call(this,name,age);
    this.salary = salary;
  }
  // 方法继承，通过原型对象继承
  Teacher.prototype = new Person();
  Teacher.prototype.constructor = Teacher;
  // 生成老师的一个实例
  var t1 = new Teacher("wang",45,10000);
  console.dir(t1);
  console.log(t1.name);
  t1.sayHi();

函数

函数定义方式

• 函数声明
• 函数表达式
• new Function

函数声明与函数表达式的区别

• 函数声明必须有名字
• 函数声明会函数提升，在预解析阶段就已创建，声明前后都可以调用

// 函数声明提升
fun();
fn();
// 函数声明
// 必须定义函数名
function fun() {
   console.log(1);
}

• 函数表达式类似于变量赋值
• 函数表达式可以没有名字，例如匿名函数
• 函数表达式没有函数提升，在执行阶段创建，必须在表达式执行之后才可以调用
• 函数本身也是一种对象，可以调用属性和方法

var fn = function () {
  console.log(2);
 };
 fn();

// 通过构造函数方法定义函数
// 函数本身也是一种对象
var fun = new Function('a','b','var a = "1";console.log(a+b)');
fun(2,3);
console.dir(fun);

函数的调用和this

调用

  • 普通函数
// 1. 普通的函数，是通过 给函数名或者变量名添加 （） 方式执行
// 内部的 this 默认指向 window
function fun() {
  console.log(this);
}
fun();
  • 构造函数
// 2.构造函数，是通过 new 关键字进行调用
// 内部的 this 指向的是将来创建的实例对象
function Person(name) {
  this.name = name;
  console.log(this);
}
var p1 = new Person("zs");
Person();
  • 对象方法
 // 3.对象中的方法，是通过对象打点调用函数，然后加小括号
// 内部的 this 默认指向的是调用的对象自己
var o = {
  sayHi: function () {
    console.log("haha");
  },
  fn: fun
}
// this 的指向是要联系执行的上下文，在调用的时候，是按照什么方式调用，指向是不一样的
o.sayHi();
  • 事件函数
// 4.事件函数，不需要加特殊的符号，只要事件被触发，会自动执行函数
// 事件函数的内部 this 指向的是事件源
  document.onclick = function () {
    console.log("事件");
  };
  • 定时器、延时器的函数
 // 5.定时器和延时器中的函数，不需要加特殊的符号，只要执行后，在规定的时间自动执行
// 默认内部的 this 指向的是 window
  setInterval(function () {
    console.log("time");
  },1000);

this

在这里插入图片描述

call、apply、bind

call

• 语法：
fun.call(thisArg,arg1, arg2, arg3, …)

• thisArg
在 fun 函数运行时指定的 this 值
如果指定了 null 或者 undefined 则内部 this 指向 window

• arg1, arg2, … 指定的参数列

• .功能
第一个可以指定函数的 this，第二个可以执行函数并传参

• 返回值：就是函数自己的返回值

apply

• 语法：
fun.apply(thisArg, [argsArray]

• .功能
第一个可以指定函数的 this，第二个可以执行函数并传参

• 返回值：就是函数自己的返回值

bind

• 语法：
fun.bind(thisArg,arg1, arg2, arg3, …)

• thisArg：当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用 new 操作符调用绑定函数时，该参数无效。

• arg1, arg2, …：当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法。

• .功能
第一个可以指定函数的 this，bind 方法不能执行函数，但是可以传参

• 返回值：
返回由指定的 this 值和初始化参数改造的原函数拷贝(返回一个新的指定了 this 的函数，也可以叫绑定函数)

bind() 函数会创建一个新函数（称为绑定函数），新函数与被调函数（绑定函数的目标函数）具有相同的函数体（在 ECMAScript 5 规范中内置的 call 属性）。 当目标函数被调用时 this 值绑定到 bind() 的第一个参数，该参数不能被重写。绑定函数被调用时，bind() 也接受预设的参数提供给原函数。
一个绑定函数也能使用 new 操作符创建对象：这种行为就像把原函数当成构造器。提供的this 值被忽略，同时调用时的参数被提供给模拟函数。

总结

call 和 apply 特性一样

• 都是用来调用函数，而且是立即调用

• 但是可以在调用函数的同时，通过第一个参数指定函数内部 this 的指向

• call 调用的时候，参数必须以参数列表的形式进行传递，也就是以逗号分隔的方式依次传递即可

• apply 调用的时候，参数必须是一个数组，然后在执行的时候，会将数组内部的元素一个一个拿出来，与形参一一对应进行传递

• 如果第一个参数指定了 null 或者 undefined 则内部 this 指向window

bind

• 可以用来指定内部 this 的指向，然后生成一个改变了 this 指向的新的函数
• 它和 call、apply 最大的区别是：bind 不会调用

• bind 支持传递参数，它的传参方式比较特殊，一共有两个位置可以传递

  1. 在 bind 的同时，以参数列表的形式进行传递
  2. 在调用的时候，以参数列表的形式进行传递

• 那到底以谁 bind 的时候传递的参数为准呢还是以调用的时候传递的参数为准
---- 两者合并：bind 的时候传递的参数和调用的时候传递的参数会合并到一起，传递到函数内部

应用

var o = {
   0: 10,
   1: 20,
   2: 30,
   length: 3
 };
Array.prototype.push.call(o,50);
console.log(o);

 var arr = [1,3,4,6,8];
console.log(Math.max.apply(Math,arr));
console.log.apply(console,arr);

 // 想修改的是定时器的函数内部的 this
 var o = {
   name: "zs",
   age: 18,
   s: function () {
     setInterval(function () {
       console.log(this.age);
     }.bind(this),1000);
   }
 }
 // o.s();
 // 更改 事件函数中的 this
 document.onclick = function () {
   console.log(this);
 }.bind(o);

函数的其他成员

• arguments 实参集合
• arguments.callee 函数本身，arguments的一个属性
• fn.caller 函数的调用者,如果在全局调用，返回的调用者为 null。
• fn.length 形参的个数
• fn.name 函数的名称

function fn(a,b) {
  // 实际应用中，会在函数内部直接使用 一个 arguments 的关键字
   console.log(arguments);
   // console.log(arguments.callee);
   // 存储的是函数在调用时，传入的所有 实参 组成的一个类数组对象
   console.log(fn.arguments);
   // 函数的调用者，函数在哪个作用域调用，caller 就是谁，如果在全局调用，值就是 null
   console.log(fn.caller);
   // length 指的是形参的个数
   console.log(fn.length);
   // 函数的名字
   console.log(fn.name);
  }

高阶函数

函数可以作为参数

 // 1.函数作为另一个函数的参数
// 定义一个函数，吃饭的函数，吃完饭之后，可以做其他的事情，看电影、聊天、看书
  function eat(fn) {
   console.log("吃晚饭");
    // 接下来的要做的事情是不固定的
    fn();
  }
  eat(function () {
    console.log("看电影");
  });

函数可以作为返回值

// 2.函数作为一个函数的返回值
// 需求：通过同一段代码实现以下效果
 // 输出 100 + m
 // 输出 1000 + m
 // 输出 10000 + m
 function outer(n) {
   return function inner(m) {
     console.log(m + n);
   }
 }
 // 在外部执行 inner 函数
 //  100 + m
 var fun = outer(100);
 fun(3);
 fun(13);
 fun(23);
 var fun1 = outer(1000);
 fun1(3);

函数闭包

回顾作用域、作用域链、预解析

全局作用域
函数作用域
没有块级作用域
内层作用域可以访问外层作用域，反之不行

闭包

一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。
也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。
在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

函数定义时天生就能记住自己生成的作用域环境和函数自己，将它们形成一个密闭的环境，这就是闭包。
不论函数以任何方式在任何地方进行调用，都会回到自己定义时的密闭环境进行执行。

// 体会闭包
// 将一个内部函数拿到父函数的外面，观察是否还能调用父函数内部的变量
 function outer() {
   // 形成闭包环境中的变量不是一成不变的，可以被更改
   var a = 10;
   function inner() {
     console.log(a++);
   }
   // 将inner 函数作为返回值
   return inner;
 }
 var inn = outer();
 inn();
 inn();

用途

可以在函数外部读取函数内部成员
让函数内成员始终存活在内存中

// 给数组中的每一项赋值一个 函数
var arr = [];
for (var i = 0 ; i <= 10 ; i++) {
  // 自调用函数
  (function (i) {
    arr[i] = function () {
      console.log(i);
    };
  })(i);
}
// 目的：调用数组对应的项，输出它的对应下标
arr[0]();
arr[1]();
arr[2]();
我和夏天来了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
函数的继承
u012902406的博客
03-03 893
构造函数的继承 function parent() { this.name = 1 this.play = [3,4] } parent.prototype.say = function () { console.log('say') } function children() { pare...
函数继承
qq_34758991的博客
03-28 717
寄生组合继承
继承与函数
weixin_44167338的博客
02-20 246
面向对象回顾 面向对象编程思想 面向对象编程思想:根据需求,分析对象,找到对象有什么特征和行为,通过代码的方式来实现需求,要想实现这个需求,就要创建对象,要想创建对象,就应该显示有构造函数,然后通过构造函数来创建对象.,通过对象调用属性和方法来实现相应的功能及需求,即可 首先JS不是一门面向对象的语言,JS是一门基于对象的语言,那么为什么学习js还要学习面向对象,因为面向对象的思想适合于人的想法...
继承函数
niejinhao052011的专栏
12-06 460
#include class A { private:  int x1; public:  A()  {   x1=0;   cout  }  A(int i)  {   x1=i;   cout  }  void disp()  {      cout  } }; class B {  int x2; public:  B()  {
JS继承之借用构造函数继承和组合继承
11-22
借用构造函数继承  在解决原型中包含引用类型值所带来问题的过程中，开发人员开始使用一种叫做借用构造函数(constructor stealing）的技术（有时候也叫做伪造对象或经典继承）。这种技术的基本思想相当简单，即在...
JavaScript 原型继承之构造函数继承
10-28
JavaScript中的构造函数继承是基于原型继承的一种实现方式，它允许一个构造函数（子类）从另一个构造函数（父类）那里继承属性和方法。在JavaScript中，每个对象都有一个[[Prototype]]内部属性，通常通过`__proto__`...
JavaScript 对象、函数和继承
10-29
JavaScript可以说是一个基于对象的编程语言，为什么说是基于对象而不是面向对象，因为JavaScript自身只实现了封装，而没有实现继承和多态。
C++类继承 继承后函数的值实现详解
01-20
类的继承会首先寻找基类，若基类未实现，则会寻找派生类的函数 1. class继承，函数不继承 #include class Base { public: Base(){} ~Base(){} int a; void setA() { a = 1; } }; class A:public Base { ...
继承性函数
niejinhao052011的专栏
12-02 403
#include class string {  int x; public:  string(){}  string(int x)  {   this->x=x;  }  void operator+=(string s)  {   x+=s.x  }  void disp()  {   cout  } }; void main() {  string
继承与函数进阶
CS_DGD的博客
12-11 115
对象之间的继承 对象拷贝 for…in：父对象的属性拷贝给子对象 // 父级的对象 var laoli = { name: "laoli", money: 1000000, house: ["商铺", "住宅"], tech: function () { console.log("厨艺") } }; // 子级的对象 var xiaoli = { name: "xiaoli"
继承（隐藏 & 派生类的六个默认成员函数）
HXiaoFan的博客
07-17 612
1 隐藏（重定义） 隐藏是指：在基类和派生类中有同名的成员变量或成员函数，那么派生类的成员变量、成员函数就将基类的隐藏（重定义）了。 如何调用隐藏的成员函数（或使用隐藏的成员变量）？ 指定作用域 2 派生类的六个默认成员函数 在默认情况下，派生类的默认成员函数由基类的成员函数合成（具体实现见下面的代码） （1）构造函数 子类的构造函数，继承了父类的构造函数，需要先调用父类...
C# 构造函数继承有什么作用
weixin_46879188的博客
12-13 162
class Program { public static void Main(string[] args) { ClassA clsA = new ClassA(); Console.WriteLine(); ClassA clsA1 = new ClassA("1"); Console.WriteLine(); Console.ReadKey(); } } public class Base {
C#构造函数继承
热门推荐
wangsen2235068的专栏
10-14 1万+
//继承的类，子类会调用父类无参的构造函数。从底层开始，一个父类，一个父类的调用. public class MyClass { public MyClass() { Console.WriteLine("MyClass:默认构造函数"); } public MyClass(int a,
【JS】函数继承（重点）
qq_45677671的博客
03-01 491
文章目录继承举个例子继承的作用常见继承方式原型继承借用构造函数继承组合继承ES6 的继承 继承 继承是和构造函数相关的一个应用 让一个构造函数去拥有另一个构造函数的属性和方法 所以继承一定出现在两个构造函数之间 举个例子 构造函数（类）是对一类行为的描述 那么我们类这个概念其实也很抽象 比如： 我们说 国光 / 富士 都是 苹果的品种，那么我们就可以写一个 苹果类 来实例化很多品种出来 而 苹果 / 梨 这些东西都是水果的一种，那么我们就可以写一个 水果类 统一特点就是 甜 / 水分多，而不同的水果
构造函数继承和原型继承
最新发布
03-29
构造函数继承和原型继承都是 JavaScript 中实现继承的方式，但它们的实现方式不同。 构造函数继承是指在子类的构造函数中调用父类的构造函数来继承父类的属性和方法。这种方式的优点是可以传递参数，可以继承私有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值