js中每一个构造函数都有一个prototype的属性,prototype指向一个原型对象,而这个对象的属性和方法都会被构造函数的实例所继承,因此,需要一些共享的属性和方法可以写在构造函数的原型中

1  用prototype属性可以向构造函数添加可继承的属性和方法,

注意constructor属性指向prototype对象所在的构造函数,方法放在prototype中,属性放在构造函数里,

实例,原型对象,构造函数,三者之间的关系:

实例有__proto__属性指向原型对象

原型对象有constructor指针指向构造函数

构造函数又有prototype属性指向原型对象

    <script>
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype = {
constructor: Person,
sayName: function(){
console.log(this.name);
}
}
var p = new Person('xxx',22);
p.sayName();//'xxx'
console.log(p.age);//
</script>

2  一个同名属性在实例和prototype对象中存在时,构造函数的实例采用构造函数里的this属性,查找优先级类似于:实例>原型对象

    <script>
function Person(age){
this.age = age;//创建实例时赋给实例的属性
}
Person.prototype = {
constructor: Person,
name: 'xxx',
age: 22,
sayName: function(){
console.log(this.name);
}
}
var p = new Person(233);
console.log(p.age);//
p.age = 333;
console.log(p.age);//
</script>

3 原型的继承

    <script>
function Person(){
this.age = 233;//创建实例时赋给实例的属性
}
Person.prototype = {
constructor: Person,
name: 'xxx',
age: 22,
sayName: function(){
console.log(this.name);
}
}
var p = new Person();
console.log(p.age);//
p.age = 333;
console.log(p.age);//
function Student(){ }
Student.prototype = new Person();//继承
var s = new Student();
console.log(s.name);//'xxx'
s.name = 'qqq';
console.log(s.name);//'qqq'
</script>

4 原型链的概念(修改于2019-11-13 09:41:30)

从对象的__proto__一级一级往上找

    <script>
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
toPrint(){
return 'name:'+this.name+','+'age:'+this.age;
}
}
class Son extends Person{
constructor(name,age,sex){
super(name,age);
this.sex = sex;
}
toCount(){
return this.toPrint()+','+'sex:'+this.sex;
}
}
var son = new Son('z',22,'male');
console.log(son);
console.log(son.toPrint());
console.log(son.toCount());
</script>

该对象的结构图

5、对象中固有的方法(2019-11-30 补充)

以数组对象为例,.forEach,.indexOf()等为数组对象本身的方法

而数组对象的原型为Object,原型object有hasOwnProperty(查找该对象本身的属性或方法),isPrototypeOf(判断对象是否在另一个对象的原型链中),toString等方法,

数组对象可以使用原型中的方法,可以把这些方法称为继承方法

6、构造函数,实例,原型之间的关系(2019-12-02 补充)

图示:

7、实现构造函数之间的继承:

代码示例:

    <script>
class Parent {
constructor(name) {
this.name = name;
}
say() {
console.log('this is Parent');
}
}
class Child extends Parent {
constructor(name, age) {
super(name); //调用父类
this.age = age;
}
speak() {
console.log('this is Child');
}
}
var c = new Child('aaa', 233);
c.say();
c.speak();
console.log(c);
</script>

class实现

图示:

8、原型链

所谓的原型链,指的是一个对象的__proto__属性,及其一级一级__proto__的指向,一般会指向最后的Object(Object.prototype__proto__ = null)

js中函数的原型的更多相关文章

  1. JS中函数参数和函数返回值的理解

    函数本质就是功能的集合 JS中函数是对象,因此,函数名实际上仅仅是一个指向函数对象的指针,不会与某个函数绑定,所以,JS中没有重载(重载就是通过传递不同类型的参数,使两个相同函数名的函数执行不同的功能 ...

  2. 关于js中函数的调用问题

    js中函数的调用方法 1.直接调用 函数名(参数): 2.通过指向函数的变量去调用 例如: var myval = 函数名: 此刻 myval是指向函数的一个指针: myval(实际参数):此刻调用的 ...

  3. js中函数传参的情况

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. JS中函数void()

    <a href="javascript:void(0)">hello</a>/* * JS中函数void()的运用大体是这种新式; * void()是运算符 ...

  5. 对JS中函数的理解

    函数本质就是功能的集合 JS中函数是对象,因此,函数名实际上仅仅是一个指向函数对象的指针,不会与某个函数绑定,所以,JS中没有重载(重载就是通过传递不同类型的参数,使两个相同函数名的函数执行不同的功能 ...

  6. js中函数的参数为函数的情况即回调函数

    js中函数的参数可以是数组对象也可以是函数,当参数为函数时我们叫做回调函数 //定义回调函数function B() { console.log("函数B")setTimeout( ...

  7. js中__proto__(内部原型)和prototype(构造器原型)的关系

    一.所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function) Number.__proto__ === Function.prot ...

  8. js中的prototype原型解析

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  9. 关于原生js中函数的三种角色和jQuery源码解析

    原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...

随机推荐

  1. Android OkHttp + Retrofit 取消请求的方法

    本文链接 前言 在某一个界面,用户发起了一个网络请求,因为某种原因用户在网络请求完成前离开了当前界面,比较好的做法是取消这个网络请求.对于OkHttp来说,具体是调用Call的cancel方法. 如何 ...

  2. MyEclipse注册代码

    package test;    import java.io.BufferedReader;  import java.io.IOException;  import java.io.InputSt ...

  3. 2018 php 面试

    排序算法 快速排序 快速排序是十分常用的高效率的算法,其思想是:先选一个标尺,用它把整个队列过一遍筛选,以保证左边的元素都不大于它,其右边都不小于它 function quickSort($arr){ ...

  4. Jenkins邮件收发(qq邮箱)

    首先确认QQ邮箱SMTP服务器的地址和端口号.如下图所示,请谨记,JENKINS全局邮箱配置需要使用: 步骤1:开启QQ邮箱的smtp服务:登陆QQ邮箱-设置-账户-开启POP3/SMTP服务-完成“ ...

  5. Linux下聊天和文件传输软件

    全平台聊天软件 米聊 官网地址: http://www.miliao.com 潮信 官网地址: https://www.chaoxin.com

  6. [牛客网NOIP赛前集训营-提高组(第一场)]C.保护

    链接:https://www.nowcoder.com/acm/contest/172/C来源:牛客网 题目描述 C国有n个城市,城市间通过一个树形结构形成一个连通图.城市编号为1到n,其中1号城市为 ...

  7. Python开发【第三篇】数据类型

    1.数字类型 int 整数 1 2 3 float 浮点数 1.1 0.9 0.99 complex 复数 (2+0j) str 字符串 'hello world' "hello world ...

  8. ios 11 系统CPU过高,xib中textfield使用导致出过高

    ios11 发布之后,作为开发肯定是第一时间进行了升级测试,全新的系统不免会带来这样那样的问题.项目中使用xib的小伙伴们会发现,项目的cpu使用率非常高,尤其是初始化的时候,并没有线程的操作,CPU ...

  9. Linux配置部署_新手向(五)——Docker的安装与使用

    前言 最近还是在考虑Linux下net core的部署问题,还是发现了很多麻烦的问题,这里还是继续把需要使用的东西部署介绍下吧. Docker 其实对于Docker我也是一星半点儿,了解的不够深入,大 ...

  10. django测试开发-1.开始Hello django!

    用python开发出一个web页面的时候,需要找一个支持python语言的web框架.django框架有丰富的文档和学习资料,也是非常成熟的web开发框架,本篇写一个简单的“hello django! ...