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

2019-02-13 admin

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

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 // china

apple.eat()  // apple ---- red
banana.eat() // banana ---- yellow

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 原型对象的属性和方法。

原文链接:https://segmentfault.com/a/1190000018140664

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53681.html

文章标题:javascript 面向对象 new 关键字 原型链 构造函数

相关文章
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 <span id=“mt9” class=“sent...
2015-11-12
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
JavaScript短路原理精简代码
js中||和&&的特性帮我们精简了代码的同时,也带来了代码可读性的降低,虽然高效,但请灵活使用。 在js逻辑运算中,0、""、null、false、undefined、NaN都会判为false,其他都为t...
2015-11-12
《JavaScript快速查询手册》PDF
下载地址:《JavaScript快速查询手册》PDF下载 http://pan.baidu.com/s/130rP8’ 简介: JavaScript快速查询手册 目录 前言 第一部分 命令查询 第二部分 JavaScript语句与运算符 第...
2015-11-16
7个让JavaScript变得更好的注意事项
随着浏览器性能提高,伴随着新的HTML5的编程接口的稳步采用,网页上的JavaScript的音量在逐渐增加。然而,一个写得不好的程序编码却拥有着打破整个网站,让用户为之沮丧和驱赶潜在客户的潜力。 开发人员必须使用所有供他们任意使用的工具和技...
2015-11-12
回到顶部