JavaScript原型、原型链图、静态成员和实例成员
面向对象编程的好处是让能够让代码进行复用，提高代码运行速度，同时有利于代码的维护。
在面向对象中要想使代码进行复用就需要使用原型
一、什么是原型
1、prototype
prototype是函数中的属性，每个函数都有一个prototype属性，这个prototype属性，其实是一个指针， 指向了一个对象。其实函数也属于一个对象。对象中又有一个__proto__属性。
2、__proto__
__proto__是一个对象的属性
prototype和__proto__是javascript内部使用寻找原型链的属性
二、实例成员和静态成员
我们在讨论静态成员和实例成员时候，把函数当成构造函数，把构造函数创建出来的对象称之为实例。
1、实例成员
实例就是由构造函数创建出来的对象，这个对象就是实例。由构造函数创建出来的对象（实例）能够直接访问属性和方法（包括：对象本身 以及原型中的所有的属性和方法）。
// function Person() {} // 定义的函数 // var p = new Person(); //p 为构造函数创建出来的对象 ,我们把构造函数创建出来的对象称之为实例。
function Person(name, age) {this.name = name; this.age = age; }Person.prototype.sayHi = function() {console.log("你好,小明"); }; var p = new Person("小明", 10);console.log(p.name); // 小明console.log(p.age); // 10 console.log(p.sayHi); // function () {console.log("你好,小明")}// p.name p.age p.sayHi 就是实例成员p.sayHi();
2、静态成员
function Person(name, age) { this.name = name;this.age = age;}// var p = new Person("jack", 19); Person.say = function() {alert("我是静态方法");}; // Person.say 就是静态成员 // Person.length 也是静态成员，因为length是函数中的 方法，是来直接获取函数中形参的个数 console.log(Person.say); // function () {alert("这是静态方法");}console.log(Person.length); // 2
三、混入
1、什么是混入
举栗子：你有一个苹果和一个梨，分别咬了一口，嘴里又有苹果味和梨味，两个口味混合了，这就是混入。
在面向对象中混入就是：一个对象中有另一个对象的属性或者方法
// 1、首先创建两个对象（好比一个苹果一个梨）var obj1 = {name:'小明',age:10,sex:'男',say:function(){console.log('hello')}
}var obj2 = {sayHi:function(){console.log(this);console.log(this.name)this.say();}
}
obj2.name = obj1.name;
obj2.say = obj1.say;
obj2.sayHi() // 2、 一个对象有多个属性，怎么方便实现混入（不能让一个一个对象的属性给另个一个对象，批量给好了）
var obj1 = {name:'小明',age:10,sex:'男',say:function(){console.log('hello')}
}var obj2 = {sayHi:function(){console.log(this);console.log(this.name)this.say();}
}for(var k in obj1){// k 就是obj1对象中的键 例如：name 、age//把obj1 对象中的属性给obj对象obj2[k] = obj1[k];
}obj2.sayHi() //3、 把这个方法封装 封装混入函数 ，将一个对象中的属性混入到另一个对象当中// 把 prams2 对象的中的属性传入到 prams1中/*function mix(prams1,prams2){for(var k in prams2){// k 就是obj1对象中的键 例如：name 、age//prams1 对象中的属性给prams2对象prams1[k] = prams2[k];}
}*/var obj1 = {name:'小明',age:10,sex:'男',say:function(){console.log('hello')}
}var obj2 = {sayHi:function(){console.log(this);console.log(this.name)this.say();}
}function mix(prams1,prams2){for(var k in prams2){// k 就是obj1对象中的键 例如：name 、age//prams1 对象中的属性给prams2对象prams1[k] = prams2[k];}
}
mix(obj2,obj1)
obj2.sayHi() // 封装混入函数的应用是在jQuey中$extend( ) 拓展方法，这个方法的作用就是给一个jQuery对象添加方法用的。function extend(prams1,prams2){for(var k in prams2){// k 就是obj1对象中的键 例如：name 、age//prams2 对象中的属性给prams1对象prams1[k] = prams2[k];}
}
2、混合式继承 (让一个对象具有另一个对象的方法或者属性，这里使用原型+构造函数形式)
// 封装的混入函数function extend(prams1,prams2){for(var k in prams2){prams1[k] = prams2[k];}}// 创建函数
function Person(prams){// this.name = prams.nameextend(this,prams); // 这里的this指向 通过构造函数创建出来的这个对象}// 在Person的原型中添加extend方法// 把 obj 中的属性和方法添加到 Person函数原型中
Person.prototype.extend = function(obj){extend(this,obj);}Person.prototype.extend({sayHi:function(){console.log(this.name)console.log(this.age)}
})var p1 = new Person({name:'小明',age:10
})var p2 = new Person();
p1.sayHi()
p2.sayHi()
console.log(p1)
console.log(p2)
四、原型链的完整版绘制
// 定义一个函数
function Foo(){}// 一个函数会继承于Function.prototype
console.log(Foo);
console.log(Foo.__proto__ === Function.prototype); // true
// 函数就是（Foo）就是大写Function的实例console.log(Foo.constructor); // function Function() { [native code] }
// 一个函数就有一个原型，函数名.prototype (Foo.prototype),这个原型继承Object.prototype
console.log(Foo.prototype); // Object {constructor: function} var f1 = new Foo();
// 通过构造函数所创建的每个对象都会有一个constructor属性。该属性指向的是Foo构造函数（通过继承的方式），而不是Foo函数。console.log(f1.constructor); //
学IT，上博学谷
JavaScript原型、原型链图、静态成员和实例成员相关推荐
- JavaScript面向对象学习构造函数、静态成员和实例成员（二）
⭐️⭐️⭐️ 作者:船长在船上
- JavaScript 静态成员和实例成员
demo.html: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- 构造函数的静态成员和实例成员
如题: 以下代码执行后,result的值是什么? function Test(name) { } Test.name='Tom'; Test.prototype.name="John&quo ...
- 构造函数（静态成员）(实例成员)
1.Javascript的构造函数中可以添加一些成员,可以在构造函数本身添加,也可以在构造函数的内部的this上添加,通过这两种方式添加的成员,就分别成为静态成员和实例成员. 静态成员:在构造 ...
- c# 静态成员和实例成员的区别
c# 静态成员和实例成员的区别 静态成员也称为共享成员,例如静态属性 静态字段 静态方法:静态成员可以在类的实例之间共享. 静态类中只能有静态成员,不能有实例成员,因为静态类不能进行实例化: 在非静态 ...
- Javascript静态成员与实例成员
静态成员 静态成员由构造方法提供,一般用在工具函数的包装中. function Person(){}Person.a = function(){console.log("a");} ...
- C#面向对象基础(四) 静态成员与实例成员
类里的成员有两种归属划分静态的与实例的 静态成员 -> static声明 静态的成员,是属于"类"的 实例的成员,属于"类的实例"的 1 cla ...
- JS高级之静态成员和实例成员
成员 就是指属性.方法的统称 静态成员是指 由构造函数直接调用的属性.方法叫静态成员 实例成员是指 由构造函数创建出来对象才能调用的属性和方法就叫实例成员 实例化: 创建一个对象,也可以叫实例化一个对 ...
- js高级-静态成员和实例成员
function Star(uname,age){this.uname = uname;this.age = age;this.sing = function(){console.log('我会唱歌' ...
最新文章
- java 递归思想的理解
- 百度前离职员工偶遇同门百度人，轻松通过面试，直呼放水很明显！这样真的好么？...
- resin启动时报错com.caucho.config.LineConfigException的解决
- html使用共同的头部导航
- 问：一行Python代码到底能干多少事情？（一）
- servlet规范定义的Servlet生命周期
- 使用SQLALCHEMY 出现warning的问题解决
- java7和java8切换_仍不切换到Java 8的6个理由
- 2021年春季学期期末统一考试 西方经济学（本） 试题
- 辽宁计算机应用考试报名时间,2021辽宁上半年计算机应用水平考试报名时间及方法...
- EmguCv模板匹配学习日记
- 电脑开机蓝屏时要怎么解决修复?哪种方便比较好?
- 阿里云服务器使用xshell连接
- 【无标题】setting.json 配置
- 软件工程导论学习笔记
- html5音频剪辑,访谈类音频剪辑的5个小贴士
- html页面大于号,css中大于号（）是什么意思？
- 互联网防骗指南[摘录58同城]
- 用MicroPython开发ESP32-文件传输工具-ampy
- TensorFlow学习笔记（二）把数字标签转化成onehot标签