博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript 面向对象 new 关键字 原型链 构造函数
阅读量:7097 次
发布时间:2019-06-28

本文共 3452 字,大约阅读时间需要 11 分钟。

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() // falsenew 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对象了。

详细讲解连接:

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 // chinabanana.address // chinaapple.eat()  // apple ---- redbanana.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{} truedata.__proto__是一个对象因为:javascript规定所有对象都有原型所以: data.__proto__.__proto__  == Object.prototype // true这就是原型链了 data.__proto__.__proto__data对象继承了 Date Object 原型对象的属性和方法。

转载地址:http://xiaql.baihongyu.com/

你可能感兴趣的文章
封装jQuery Validate扩展验证方法
查看>>
《ELK Stack权威指南(第2版)》一3.7 MySQL慢查询日志
查看>>
Ubuntu 13.10安装后你要做的8件事
查看>>
安装完Ubuntu14.10后要做的7件事
查看>>
2016年大数据发展趋势预测(30PPT)
查看>>
《C++面向对象高效编程(第2版)》——3.7 编译器如何实现const 成员函数
查看>>
《iOS 8应用开发入门经典(第6版)》——第2章,第2.4节小结
查看>>
《树莓派实战秘籍》——2.2 技巧22构建一个定制内核
查看>>
MySQL DBA 面试全揭秘
查看>>
sicp 4.3.1小节两题
查看>>
如何修改 Linux 的 GRUB 启动背景
查看>>
《大数据导论》一第2章 采用大数据的商业动机与驱动
查看>>
《21天学通C语言(第6版•修订版)》一1.4 程序开发周期
查看>>
《Visual Basic 2012入门经典》---- 2.5 使用“Properties”窗口设置对象属性
查看>>
android sdutio常用快捷键
查看>>
arcgis catalog 连接sde时出现 Target state not found in the STATES table 错误
查看>>
Spark机器学习7·降维模型(scala&python)
查看>>
架构师速成4.3-幼儿园要学会查找资料
查看>>
PostgreSQL 10.0 preview 功能增强 - 支持EUI-64格式MAC地址类型
查看>>
没有时间看MOOC怎么办?
查看>>