1.面向对象的概念：OOP(面向对象)：不是一种语法，是一种编程思想；js中的面向对象编程，就是创建对象，给对象添加属性和方法。
2.创建对象：一种是直接创建，另一种是构造函数方式创建
a.直接创建： var obj = {};
b.构造函数方式创建：var obj = new object{};
构造函数方式创建示例：
var obj1 = new Object(); obj1.name = "张三"; obj1.age = 12; obj1.sex = ‘男‘; var obj2 = new Object(); obj2.name = ‘李四‘; obj2.age = 13; obj2.sex = ‘女‘;
概念：定义一个函数，每次调用都能得到一个对象，这种调用就能创建对象的函数，就是工厂函数；
示例：
function createObj(name,age,sex){ var obj = new Object(); obj.name = name; obj.age = age; obj.sex = sex; return obj; } var obj1 = createObj("张三",12,"男"); var obj2 = createObj("李四",13,"女"); var obj3 = createObj("王五",11,"女");
工厂函数优点：可以同时创建多个对象；
缺点：创建出来的没有具体的类型（比如是Array和Number），都是object类型，我们看到的对象只是object，不知道具体类型。例如：
解决方法：自定义构造函数。其实相当于自己写一个函数，专门用来new对象
示例：
var arr = new Array(); var obj = new Number(); var str = new String();
输出结果：
构造函数注意事项：
a.构造函数是用来创建对象的，必须配合new使用，否则就不具备创建对象的能力；
b.构造函数内部不能有return关键字，因为构造函数会自动返回对象。如果返回基本数据类型，和不加效果一样，如果返回复杂数据类型，构造函数就没意义了。
c.如果new时，不需要参数，小括号可以省略；
d.构造函数首字母通常大写；
概念：任何函数在创建好的时候，浏览器会分配一个对象给这个函数，通过函数的prototype可以访问到这个对象。这个对象叫做原型对象，简称原型。通过new构造函数实例化出来的对象默认可以访问到这个对象的属性和方法。
使用：创建对象就使用构造函数，多个对象要使用同一个方法或属性，就把这个属性或方法绑定到原型上。
__proto__
<style> *{ padding: 0; margin: 0; list-style: none; } .tab{ width: 600px; height: 300px; border:1px solid #000; margin: 50px auto; } ul{ height: 50px; } ul li{ float:left; width: 100px; height: 50px; text-align: center; line-height:50px; font-size:20px; background-color: rgba(135, 206, 235,0.5); } ul li.active{ background-color: rgb(255, 69, 0); } ol{ height: 250px; } ol li{ height: 250px; text-align: center; font-weight:bold; color:#fff; display:none; } ol li.active{ display:block; } ol li img{ width: 600px; height: 250px; } </style> <body> <div class="tab"> <ul> <li class="active">绿色</li> <li>粉色</li> <li>蓝色</li> <li>1</li> <li>2</li> <li>3</li> </ul> <ol> <li class="active"><img src="./images/1.jpg" alt=""></li> <li><img src="./images/2.jpg" alt=""></li> <li><img src="./images/3.jpg" alt=""></li> <li><img src="./images/4.jpg" alt=""></li> <li><img src="./images/5.jpg" alt=""></li> <li><img src="./images/6.jpg" alt=""></li> </ol> </div> </body> <script type="text/javascript"> function Tab(){ this.ulis = document.querySelectorAll(‘ul li‘); this.olis = document.querySelectorAll(‘ol li‘); var that = document.querySelector(‘ul li.active‘); var that1 = document.querySelector(‘ol li.active‘); var _this = this; for(let i=0;i<this.ulis.length;i++){ this.ulis[i].onclick = function(){ that.className = ‘‘; this.className = ‘active‘; that = this; that1.className = ‘‘; _this.olis[i].className = ‘active‘; that1 = _this.olis[i] } } } var n = new Tab;
效果：
构造器：
示例：
function Person(){ } var obj1 = new Person(); console.log(obj1.__proto__.constructor === Person); // true console.log(obj1.constructor === Person); // true obj1对象中没有constructor属性，所以去原型对象上找
原型链：
先在自己身上找,如果有,直接使用,如果没有,顺着原型链往上找,找到了就使用,找不到就继续往上找,如果找到了null,都没有的话,就返回undefined;但是对象属性赋值和原型没关系，有就修改，没有就增加。
原文：https://www.cnblogs.com/biben/p/13295295.html