javaScript的函数和对象，继承原型链

一.函数
- 1.初始函数
- 2.创建函数
- - 2.1 参数设置
  - 2.2 函数声明来创建函数
  - 2.3 函数表达式创建函数
- 3.变量作用域
- 4.匿名函数
- 5.回调函数
- 6.案例
二.对象
- 1.对象概念
- 2.JS中的对象分类
- 3.字面量声明对象
- 4. 工厂创建对象
- - 4.2工厂的格式
  - 4.3 示例代码和效果：
- 5.构造函数创建对象
- - 5.1 构造函数的格式
  - 5.2示例代码和效果
- 6.内置对象
- - 6.1String对象
  - 6.2Math对象
  - 6.3Data对象
三.原型与继承
- 3.1 原型介绍
- 3.2使用原型实现继承
- 3.3原型链

一.函数

1.初始函数

JavaScript是函数式编程语言（functional language），函数的地位至关重要。
什么是函数：
具有特定功能的多条语句的封装体
函数也是JS对象，且是第一类对象（first class object）
函数对象是可执行的, 其它类型的对象是不可执行的
函数的作用：
提高代码复用。
便于阅读和交流。

2.创建函数

2.1 参数设置

无参函数，函数的功能实现，不需要设置参数。
有参函数，需要设置形参，用于接收用户输入的实参。

调用函数时，解析器也不会检查实参的数量
多余实参不会被赋值
实参的数量少于形参的数量，则没有对应实参的形参将是undefined

2.2 函数声明来创建函数

语法：
function 函数名([形参1,形参2…形参N]){
语句…
}

示例代码：

     //无参函数function demo4() {alert("调用方法demo4");}//函数的调用：demo4();//有参函数,求输入的两个数的和function sumNum(a,b){            a=parseInt(a);b=parseInt(b);let c=a+b;console.log(c);}sumNum(12,33);

2.3 函数表达式创建函数

使用函数表达式来创建一个函数
var 函数名 = function([形参1,形参2…形参N]){
语句…
}

优点:函数表达式,后面赋给前面.用于动态生成多

代码示例：

let scr=function (a,b){         a=parseInt(a);b=parseInt(b);console.log(a);console.log(b);let c=a*b-b;console.log(c)
}//调用时scr(12,1213);

3.变量作用域

4.匿名函数

匿名函数指的是没有函数名称的函数，可以有效的避免全局变量的污染。
表示形式：

//自调函数，后面的小括号，表示给匿名函数传参并立刻执行
(function (num1,num2){return num1+num2 ;
})(2,3);

5.回调函数

什么函数才是回调函数?
程序员定义的
程序员没有直接调用
但最终它执行了(在特定条件或时刻)
在项目开发中，是值一个函数A作为参数传给函数B，在B函数体内调用函数A，A为回调函数。
示例代码：

<script>
function cal（num1,num2,fn）{return fn(num1,num2);
}
console.log(cal(45,55,function(a,b){return a+b;
}));      //输出结果100console.log(cal(10,20,function(a,b){return a*b;
}));      //输出结果200
</script>

6.案例

求斐波那契数列第N的值，1 ,1,2,3，5,8…
从第三项开始，每一项等于前两项之和。
示例代码如下：

function fibonacci(n) {if (n <= 1) {return n;} else {let a = 1;let b = 1;for (let i = 3; i <= n; i++) {let c = a + b;a = b;b = c;}return b;}
}// 示例用法
const n = 6;
const result = fibonacci(n);
console.log(`斐波那契数列第${n}项的值为: ${result}`);

二.对象

1.对象概念

对象属于一种复合的数据类型，其可以保存多个不同数据类型的属性（或方法）,每个属性就是一个键值对，将这些属性（方法）封装在一起，就构成了一个对象。

2.JS中的对象分类

JS中对象的分类：

内建对象
由ES标准中定义的对象，在任何的ES的实现中都可以使用，直接new产生对象。
比如：String Number Boolean Function Object… Math（不要new）
宿主对象
由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象,不要new，直接使用
比如 BOM DOM window window.document
自定义对象
由开发人员自己创建的对象

3.字面量声明对象

使用对象字面量来创建一个对象：
使用对象字面量，在创建对象时，直接指定对象中的属性，语法如下：
{属性名:属性值,属性名:属性值…}
对象字面量的属性名可以加引号也可以不加，建议不加, 如果要使用一些特殊的名字，则必须加引号.

属性名和属性值是一组一组的键值对结构，
键和值之间使用:连接，多个键值对之间使用,隔开
如果一个属性之后没有其他的属性了，就不要写.

成员变量的访问：对象名.属性名，或者和下面学生对象一样添加对象的输出方法。
示例

<script>//版本1var obj={};obj.brand = "huawei";obj.price = 2800;//版本2var obj1={name："jim"，age：19};//版本3（最常用，排版舒适）var student={name:"小王",number:11,age:20,class:114,//为对象添加输出方法，类似于之前的函数//这里的this指的是当前这个对象，在控制台上输出它整个内容printInfo :function (){console.log(this);}}//对象方法的调用student.printInfo();
</script>

输出学生对象如下，整体还是一个对象：

4. 工厂创建对象

上面的字面量声明对象确实可以，但是效率太低了，如果我想一下子添加十条学生对象呢？属性值都是一样的，就要用到接下来的工厂方法来创建对象了。

4.2工厂的格式

工厂创建对象，效率大大提高，因为同一种对象属性相同，封装成函数，是在函数中创建对象，传入的数据就是函数的参数。
在JavaScript中，使用new Object()语法可以创建一个空的对象。然后，可以通过为该对象添加属性和方法来定义对象的行为和属性。
在下面的示例中，通过var student = new Object()，我们创建了一个名为student的空对象。
取余操作类似于字面量定义，不过有一个缺点：所创建的对象都是object这个类型，无法区别。

4.3 示例代码和效果：

<script>function Student(nane,number,age,class1){   //在函数中创建对象var student = new Object();              //使用工厂方法创建对象student.nane = nane;student.number = number;student.age=age;student.class1=class1;student.printInfo=function () {console.log(this);}return student;}var student1 = Student("小明",2,15,401);var student2 = Student("小王",3,16,811);var student3 = Student("小六",31,16,811);
student1.printInfo();
student2.printInfo();
student3.printInfo();
</script>

效果：

5.构造函数创建对象

上面的工厂方法已经很方便了，但是效果却不是我们想要的，我们不能直观的看出它是属于什么类型的对象，都统一为Object对象了。

5.1 构造函数的格式

这时候就需要构造函数出马了，直接声明一个名为Student的函数，使用this指向，调用时new一个对象，其中调用new是构造函数的鲜明特征。
格式为：
fuction 对象名（参数1，参数2…）{
this.属性1名称=参数1；
this.属性2名称=参数2；
…
//调用显示这个对象内容的方法
this.方法名=fuction（）{
//方法体
}
}
调用时：var 变量名=new 对象名（实参1，实参2…）；

其中：this指向的是当前创建的新的对象

5.2示例代码和效果

代码

   function Student (name,number,age,class1) {this.name = name;this.number = number;this.age = age;this.class1 = class1;//每创建一个对象，就会创建一个该对象的方法，可以放入全局调用域中，改为对象的执行this.show = function () {//this指向新创建的对象console.log(this)            }}// 利用构造函数创建对象，需要newvar student1 = new Student("天神",11,23,22);

效果如下：

6.内置对象

6.1String对象

主要的属性和方法，有如下几种：

charAt（）：获取指定下标的字符
indexof（）：获取查询字符首次出现的下标
substring（start，end）：下边在起点终点区间内的字符串
substr（start，length）：从起点开始截取指定长度的字符串
split（）：按括号中的字符对字符串进行分割

6.2Math对象

PI：圆周率
abs：绝对值
max和min
ceil（）和floor（）：向上取整和向下取整。
random（）：生成0到1的随机数
pow（a,b）:a的b次幂

6.3Data对象

getFullYear（）：获取四位数字的年份，如2023
getMonth（），getData（），getHour（），getMinutes（），getSecons（）分别获取对应月份，天，小时，分钟，秒。
getDay():获取星期几。

三.原型与继承

这一节很重要，之前也看了不少学习视频，学校老师也讲得很详细，博客也看了不少，都在证实这一点，因为它有些难，我尽可能讲得通俗易懂些，方便理解，当然也比较简洁。

3.1 原型介绍

为什么要引入原型？看如下代码：

 function Student (name,number,age,class1) {this.name = name;this.number = number;this.age = age;this.class1 = class1;this.show = function () {console.log(this)}}// 利用构造函数创建对象，需要newvar student1 = new Student("天神",11,23,22);var student2 = new Student("小王",3,16,811);console.log(student1.show==student2.show);    //结果为flase

输出结果为flase，说明每个对象调用的方法不是同一个，每次创建对象都要创建一个新的方法，效率太低。
而原型的思想就是，利用原型对象来保存一些公共属性和方法，当访问某个对象中不存在的属性和方法时，会自动调用原型中的属性和方法。

3.2使用原型实现继承

JS创建的任意一个函数，解析器都会向函数中添加一个属性prototype(原型对象)，这个属性对应着一个对象，这个对象就是我们所谓的原型对象。
使用原型实现继承是JS的传统方式，如果一个对象本来没有某个属性和方法，从其他对象中获取了，这就是继承。
具体示例如下：

 function Student (name,number,age,class1) {this.name = name;this.number = number;this.age = age;this.class1 = class1;}Student.prototype.show = function () {console.log(this)}var student1 = new Student("天神",11,23,22);var student2 = new Student("小王",3,16,811);student1.show();student2.show();console.log(student1.show==student2.show);

结果显示，所有的类最顶层原型都是object：

3.3原型链

在JS中，对象有原型对象，原型对象也有原型对象，就如之前说说的最顶层的原型对象为Object，这样就形成了一个原型链。
对象中的构造函数：在原型对象中有一个constructor，指向该对象的构造函数。

function person{}
person.prototype.constructor==person;   //返回true

示例代码：
要求杰出人才继承于工作者，工作者继承于人。

<script>function Person(name,age) {this.name=name;this.age=age;}Person.prototype.showing= function(){console.log(this);}function Worker(name,age,pay){Person.call(this,name,age);this.pay = pay;}//worker的原型为personWorker.prototype=new Person();//worker的原型对象指向worker的构造函数Worker.prototype.constructor =Worker;Worker.prototype.showing2=function (){console.log(this);}//下面的类似function ExpertWorker(name,age,pay,realm){//继承构造方法Worker.call(this,name,age,pay);           this.realm=realm;}ExpertWorker.prototype=new Worker();ExpertWorker.prototype.constructor=ExpertWorker;ExpertWorker.prototype.showing3=function () {console.log(this);}var p1=new Person("王大壮",22);var p2=new Worker("刘二蛋",21,5000);var  p3=new ExpertWorker("毛神",44,5566,"玩游戏");p1.showing();p2.showing2();p3.showing3();</script>

显示效果:

第二章是核心内容，需要认真对待，虽然我写的可能有些简洁了，但是仔细看注释还是可以很好的吸收这部分内容的，然后自己多敲一敲✿✿ヽ(°▽°)ノ✿。

javaScript核心学习（二）函数和对象，继承原型链相关推荐

Javascript 对象继承原型链继承对象冒充 call 混合方式
一.原型链继承 function ClassA() {} ClassA.prototype.color = "blue"; ClassA.prototype.sayColor = ...
JavaScript 原型对象和原型链
开篇之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述.有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就 ...
JavaScript -- 对象与原型链 [[Prototype]]
一.第三章:对象 1.属性描述符(数据描述符) 可以使用 Object.getOwnPropertyDescriptor( myObject, "a" ); 获取myObject对 ...
的函数原型_JS基础函数、对象和原型、原型链的关系
JS的原型.原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对 ...
JavaScript原型对象与原型链
JavaScript原型对象与原型链在JavaScript实际项目中,对象是十分重要的一种类型无论是作为数据表现的一种形式或配置成工厂模式制造实例等等,这些用途在实际项目开发中都使用得非常广泛依 ...
JavaScript 原型对象和原型链理解
一个例子让你彻底明白原型对象和原型链 1. 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述.有一句话说的好:如果你不能把一个很 ...
【javascript】对原型对象、原型链的理解
原型对象,原型链这些知识属于基础类知识.但是平时开发过程中也很少用到. 看网上的意思,原型链用于es5开发场景下的继承.es6有了类语法糖之后,就自带继承了. 通过理解,个人画了一张原型链解构的关系图 ...
一、翻越前端的三座大山——继承/原型链
文章目录原型专题前言什么是原型? 实例和原型的关系什么是原型链? Object 和 Function 的继承关系原型运用例子: 手写instanceof 手写call,apply 手写new ...
java 原型图_一张图搞懂原型、原型对象、原型链
基本概念在javascript中,函数可以有属性. 每个函数都有一个特殊的属性叫作原型(prototype) 每个对象拥有一个原型对象 [[Prototype]] / __proto__ / Obj ...

javaScript核心学习（二）函数和对象，继承原型链

javaScript的函数和对象，继承原型链

一.函数

1.初始函数

2.创建函数

2.1 参数设置

2.2 函数声明来创建函数

2.3 函数表达式创建函数

3.变量作用域

4.匿名函数

5.回调函数

6.案例

二.对象

1.对象概念

2.JS中的对象分类

3.字面量声明对象

4. 工厂创建对象

4.2工厂的格式

4.3 示例代码和效果：

5.构造函数创建对象

5.1 构造函数的格式

5.2示例代码和效果

6.内置对象

6.1String对象

6.2Math对象

6.3Data对象

三.原型与继承

3.1 原型介绍

3.2使用原型实现继承

3.3原型链

javaScript核心学习（二）函数和对象，继承原型链相关推荐

最新文章

热门文章

javaScript核心学习 （二）函数和对象，继承原型链

javaScript的函数和对象，继承原型链

一.函数

1.初始函数

2.创建函数

2.1 参数设置

2.2 函数声明 来创建函数

2.3 函数表达式创建函数

3.变量作用域

4.匿名函数

5.回调函数

6.案例

二.对象

1.对象概念

2.JS中的对象分类

3.字面量声明对象

4. 工厂创建对象

4.2工厂的格式

4.3 示例代码和效果：

5.构造函数创建对象

5.1 构造函数的格式

5.2示例代码和效果

6.内置对象

6.1String对象

6.2Math对象

6.3Data对象

三.原型与继承

3.1 原型介绍

3.2使用原型实现继承

3.3原型链

javaScript核心学习 （二）函数和对象，继承原型链相关推荐

最新文章

热门文章

javaScript核心学习（二）函数和对象，继承原型链

2.2 函数声明来创建函数

javaScript核心学习（二）函数和对象，继承原型链相关推荐