JavaScript面向对象
JavaScript 语言使用构造函数(constructor)作为对象的模板。所谓”构造函数”,就是专门用来生成实例对象的函数。它就是对象的模板,描述实例对象的基本结构。一个构造函数,可以生成多个实例对象,这些实例对象都有相同的结构

  1. 构造函数的首字母大写,区分一般函数。
  2. 函数体内部使用了this关键字,代表了所要生成的对象实例。
  3. 生成对象的时候,必须使用new命令。
  4. 构造函数内部使用严格模式 'use strict',防止当做一般函数调用,这样就会报错。
function Person(name, age, sex) {'use strict';this.name = name;this.age = age;this.sex = sex;
}Person() 报错
new Person("zhangxc", 29, "male");

1、new关键字 命令内部实现

function _new(constructor, params) { // 接受个数不确定参数,第一个参数:构造函数;第二个到第n个参数:构造函数传递的参数。// 1. 首先将参数组成一个数组 // 首先 .slice 这个方法在不接受任何参数的时候会返回 this 本身,这是一个 Array.prototype 下的方法,因此 this 就是指向调用 .slice 方法的数组本身。var args = Array.prototype.slice.call(arguments); // arguments伪数组,获取函数的所有参数的伪数组。// 等价于// [].slice.call(arguments);// 2. 获取构造函数var constructor = args.shift(); // shift()返回数组第一个元素// 3. 使用构造函数原型创建一个对象。我们希望以这个现有的对象作为模板,生成新的实例对象,这时就可以使用Object.create()方法。var context = Object.create(constructor.prototype); // Object.create()参数是一个对象,新建的对象继承参数对象的所有属性// 4. 将参数属性附加到对象上面var result = constructor.apply(context, args);// 5. 返回一个对象return (typeof result === 'object' && result != null) ? result : context;
}function Person(name, age, sex) {this.name = name;this.age = age;this.sex = sex;
}var args1 = _new(Person, "zhangxc", 18, "male");// {name: "zhangxc", age: 18, sex: "male"}var args2 = new Person("zhangxc", 18, "male");// {name: "zhangxc", age: 18, sex: "male"}

new.target属性

如果当前函数是new命令调用,new.target指向当前函数(构造函数的名称),否则为undefined。

function Test() {console.log(new.target === Test);
}Test() // false
new Test() // true

2、this关键字
this总是指向调用该方法的对象,在最外面调用就指向window
bind, call, apply都可以改变this的指向

var name = "window";
var obj = {name: "object"
}
function fun() {console.log(this.name);
}1、直接调用 fun() // window
因为此时fun() this指向window对象2、fun.call(obj);    // "object"
call改变了this的指向,此时this指向obj对象,this.name 在obj对象里面取值,而不是window对象了。

详细讲解连接:https://github.com/mqyqingfen...

3、对象的继承
JavaScript 语言的继承不通过 class,而是通过“原型对象”(prototype)实现。

prototype原型对象

  1. 每一个函数都有一个原型对象
  2. 每一个实例对象都有一个 __proto__属性

JavaScript 继承机制的设计思想就是,原型对象的所有属性和方法,都能被实例对象共享。也就是说,如果属性和方法定义在原型上,那么所有实例对象就能共享,不仅节省了内存,还体现了实例对象之间的联系。原型对象的作用,就是定义所有实例对象共享的属性和方法。这也是它被称为原型对象的原因,而实例对象可以视作从原型对象衍生出来的子对象。

// 定义水果构造函数
function Fruit(name, color) {this.name = name;this.color = color;
}// 实例化apple对象
var apple = new Fruit("apple", "red");// 实例化banana 对象
var banana = new Fruit("banana", "yellow");// 如果他们有共同的属性和方法那么就使用 prototype
// 修改 Fruit构造函数
Fruit.prototype.address = "china";
Fruit.prototype.eat = function() {console.log(this.name + "-----" + this.color);
}apple.addess // china
banana.address // chinaapple.eat()  // apple ---- red
banana.eat() // banana ---- yellowfunction M1() {this.hello = 'hello';
}function M2() {this.world = 'world';
}**// 1、继承M1,M2自己的属性和方法(hasOwnProperty)**
function S() {M1.call(this);M2.call(this);
}**// 2、继承M1原型链上的属性和方法**
S.prototype = Object.create(M1.prototype);
**// 3、继承M2原型链上的属性和方法**
Object.assign(S.prototype, M2.prototype);// 指定构造函数
S.prototype.constructor = S;var s = new S();
s.hello // 'hello'
s.world // 'world'

4、原型链
最透彻的原型链讲解 哈哈

**1. 每一个函数都有prototype属性指向他的原型对象**
**2. 每一个对象都有__proto__属性指向他的原型对象**

然后以Date()时间 构造函数为例讲解
证明:

var data = new Date();
因为:
data是一个实例对象所以他有__proto__属性指向他的原型对象
Date是一个构造函数所以他有prototype属性指向他的原型对象
所以:Date.prototype == data.__proto__    // Date{} true
data.__proto__是一个对象
因为:javascript规定所有对象都有原型
所以: data.__proto__.__proto__  == Object.prototype // true
这就是原型链了 data.__proto__.__proto__
data对象继承了 Date Object 原型对象的属性和方法。

javascript 面向对象 new 关键字 原型链 构造函数相关推荐

  1. JavaScript之继承(原型链)

    JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...

  2. JavaScript的面向对象原理之原型链

    二.JavaScript的对象 为了能够清楚的解释这一切,我先从对象讲起.从其他面向对象语言(如Java)而来的人可能认为在JS里的对象也是由类来实例化出来的,并且是由属性和方法组成的. 实际上在JS ...

  3. JavaScript 面向对象编程(二) —— 构造函数 / 原型 / 继承 / ES5 新增方法

    本篇为 JavaScript 进阶 ES6 系列笔记第二篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门 : Javascript 继承机制的 ...

  4. 面向对象笔记2 原型链 解释

    面向对象2 ## js中已经写好的构造函数 * 内置对象 * js提供的已经定义好的对象 * Array,Date,RegExp,String,Number,Boolean * 同时js定义好了对应的 ...

  5. JavaScript高级day02-PM【原型链的属性问题、探索instanceof、原型面试题】

    笔记.视频.源码:JavaScript(基础.高级)笔记汇总表[尚硅谷JavaScript全套教程完整版] 目录 P19 19.尚硅谷_JS高级_原型链_属性问题 11:53 P20 20.尚硅谷_J ...

  6. JS 面向对象编程、原型链、原型继承(个人学习总结)

    一.面向对象 1. 面向对象 是所有语言 都有的一种编程思想,组织代码的一种形式 基于对象的语言:JS语言 面向对象的语言:c++ java c# 2. 面向对象 3大特征 封装:将重用代码封装到函数 ...

  7. JavaScript面向对象——深入理解原型继承

    JavaScript继承--深入理解原型继承 原型继承 // 父类function School (name, address) {this.name = namethis.address = add ...

  8. html5创建对象的方法,JavaScript面向对象-使用工厂方法和构造函数方法创建对象...

    在上一篇文章中我们介绍了JavaScript简单对象的创建方法,简单js对象的最大问题是由于没有类的约束,无法实现对象的重复利用,并且没有一种约定,在操作时会带来问题.所以人们从设计模式中借用了一种工 ...

  9. JavaScript 面向对象之工厂模式与构造函数详解

    面向对象 什么是面向对象? 所谓的面向对象,是一种编程思想,编程思路,代码的书写格式. 之前为了简化代码,我们是将程序封装为函数的形式来调用 函数会有一些小问题:: 函数内部定义的局部作用域变量,函数 ...

最新文章

  1. iMeta | 中科院生态中心邓晔组发布微生物组网络分析平台iNAP(图文/视频教程)
  2. 我国有线电视信源编码现有体制和对高清的制约
  3. Mycat探索之旅(3)----Mycat的全局序列号
  4. linux 信号灯超时时间到,急!!信号灯超时时间已到错误又出来了!!!!
  5. mysql explain insert_MySQL之EXPLAIN 执行计划详解
  6. 【conda】解决 An HTTP error occurred when trying to retrieve this URL.
  7. PAT 乙级1019 数字黑洞
  8. 联想怎么启用计算机的无线功能,IdeaCentre B3系列电脑无线连接中心的使用方法...
  9. 如何查看android应用签名信息
  10. 给自己做个文件的保险箱
  11. 非度量多维排列 NMDS (Non-metric multidimensional scaling)分析
  12. 7z文件linux怎么解压,Ubuntu 12.04下解压7z文件
  13. 【Cocos2d-x游戏引擎开发笔记(25)】XML解析
  14. Avatar Scaler
  15. html画圣诞树—动态效果展示【炫酷合集】
  16. GPS北斗校时服务器(时间服务器)在港口自动化系统应用
  17. 解锁门禁系统新姿势--人脸识别智能门禁或成社区安全的“关键先生”
  18. 超级计算机大赛要学什么,超级计算机竞赛“七步成诗”仅三队完赛
  19. 程序人生-感受湖光景色随笔
  20. Linux top

热门文章

  1. 微信小程序 data中数据值的更改与储存
  2. java 常用的五大包
  3. 2021湖南高考成绩分段查询,2021年湖南高考成绩排名查询系统,湖南高考位次排名表...
  4. python输出被五整除的数_python中给定一系列正整数能被5整除的数字中所有偶数的和?...
  5. Map<String, Object> map=new HashMap<String, Object>();
  6. php7 捕获语法错误,PHP7 method_exists未捕获错误:函数名称必须是字符串
  7. react月份选择控件_一款很实用的ReactJS日期范围选择控件
  8. mysql workbench 1064_mysql - MySQL Workbench中的正向工程输出错误1064 - 堆栈内存溢出
  9. excel处理几十万行数据_神奇吗?仅需4步,轻松在Excel处理300万行数据
  10. python dicom 测量_python对DICOM图像的读取方法详解