一、常见的创建对象的方式有3种:

① 声明变量的方式

var obj1 = { key1: "val1", key1: "val2", show: function () { console.log(this.key1) } }
var array = [1, 2, 3];

可以给 obj1 继续添加属性和方法,如:

obj1.color = "red";
obj1.hideen = function () { console.log("aaa") };

 使用操作符 new

var obj2 = new Object();

可以给 obj2 继续添加属性和方法,如:

obj2.name = "madom";
obj2.show = function () { console.log("aaa") };

③ 创建构造函数

function Cat() {             
  this.age = "18";
  this.show = function () {
    console.log(this.age);
  }
}

其实,构造函数 也是普通函数,只有当 new 操作的时候才是构造函数,

通过构 造函数 创建实例对象。每一个对象都有自己的内部原型 proto_

各个实例对象之间并不相同。

var cat1 = new Cat();
cat1.__proto__ === Cat.prototype; //true
var cat2 = new Cat();
cat2.__proto__ === Cat.prototype; //true
cat1 === cat2; // fals

再创建一个带有 return 的构造函数

function Bird() {
this.age = 19;
this.say = function () { console.log('my age is ' + 19) };
return {
name: 'Tim',
say: function () { console.log('hello ' + this.name) },
};
}

创建一个对象实例,看看有什么不同

var bird = new Bird();
bird.say(); // hello Tim
console.log(bird); // Object {name: "Tim", say: function}

发现:如果构造函数有 return,则对象实例无法使用构造函数 return 之前的属性和方法

new 操作时内部的运作大致如下:
第1步: 在内存中开辟一块空间。
第2步: 创建一个新空对象,并把 this 指向到这个空对象。
第3步: 把空对象的 内部原型 指向 构造函数的 原型对象。
第4步: 当构造函数执行完成后,如果 没有 return(返回值) 的话,则构造函数末尾存在 ‘隐式’ 的 return this;如果  return(返回值),则将返回值赋值给对象实例。

对创建实例的操作做如下模拟(非真实执行):

var cat = new Cat();
/* this = { };
* this._proto_ = Cat.prototype
* this = cat;
* return this
*/

二、实例的属性、方法 和 构造函数的属性、方法


每个实例都可以扩展自己的属性和方法

var cat = new Cat();
cat.sex = 'male';
cat.sing= function () {
console.log('喵...');
};
console.log(cat.sex); // male
console.log(cat.sing()); // 喵...

实例继承了构造函数的属性和方法,优先在 自身 找对应的属性和方法,没找到就到构 造函数 的 原型里 找;
如果给实例添加了与构造函数 同名的 属性和方法,如下:则自动 屏蔽 构造函数里的属性和方法;

var cat = new Cat();
cat.age = 20;
cat.show = function () {
console.log('I am a cat !')
};
console.log(cat.age); //
console.log(cat.show()); // I am a cat !

所以,建议 在原型里存公共的属性,常量,方法,对象实例会 共用 原型中的属性,常量,方法,这样可以节约内存的开销

function Dog( ) {
this.age = 2;
this.name = 'Tom';
}
Dog.prototype.show = function() {
console.log(this.age);
}

除了给对象实例扩展属性和方法,也可以给构造函数扩展属性和方法,当然也可以改写其属性和方法(对 js 内置对象的属性方法的修改需谨慎)

Dog.prototype.weight = "3kg"; // 增加属性
Dog.prototype.age = 99; // 修改属性
// 增加方法,修改方法同上

构造函数的用途就如工厂,输入对应的原材料,即可输出产品

// 创建“工厂”
function Dog( option ) {
this.age = option.age;
this.name = option.name;
}
Dog.prototype.show = function() {
console.log(this.name + ':' + this.age);
}
// 准备“材料”
var option1 = {
name: "Hapa",
age: 18
}
// 输出“产品”
var dog1 = new Dog(option1);
dog1.show(); // Hapa:18

构造函数的一种“流行”的写法(构造函数上只有函数调用,原型上写属性和方法)

Dog.prototype = {
_init: function ( option ) {
this.age = option.age || 3; // 如果 option 中没有属性 age,则默认 3
this.name = option.name || 'Bob'; // 如果 option 中没有属性 name ,则默认 "Bob"
},
show: function () {
console.log(this.age);
},
sing: function () {
    console.log('汪...');
  }
};

三、this 的指向,函数的四种调用模式


① 函数执行模式 

// 定义一个加法函数
function add(a, b) {
console.log(this === window); // true
return a + b;
}
// 调用此函数
add(1, 1); //

可以看出,函数执行模式中,this 指向 window。(其实 window.add(, ); 也是可以调用的,本质上也是对象方法调用模式)

② 对象方法调用模式

document.onclick = function () {
console.log(this === document); // true
}

所有的事件响应方法都是对象方法调用模式,在此不再列举了, dog.sing();中 this 指向 dog 这个实例,它们有个共同点,就是  "xxx.yyy()" 的格式

③ 构造器的调用模式 

// 构造函数
function Dog() {
this.age = 3;
this.show = function () {
console.log(Object.prototype.toString.call(this));
}
}
// 实例化一个 dog 对象
var dog = new Dog();
dog.show(); // [object Object]
console.log(Object.prototype.toString.call(Dog)); // [object Function]

dog 调用 show 方法时,打印出 this 是 一个 Object 对象,而 构造函数 Dog 打印出来是个 Function,所以 this 不是指向 Dog,this 的属性和方法对象实例 dog 都有,说明...

额~还没想好怎么证明 this 就是 dog ...

--- 知识在于分享,转载请注出处 ---

javascript 面向对象基础 (1)的更多相关文章

  1. 了解JavaScript 面向对象基础 & 原型与对象

    面向对象语言中的对象 老是能听到什么基于对象, 面向对象. 什么是对象, 如果有面向对象基础的人可以无视了, 下面举个简单的例子给大家讲讲面向对象中, 对象的定义, 这个是比较通用的, 不过对于JS来 ...

  2. JavaScript面向对象基础与this指向问题

      前  言           我们的程序语言经历了从"面向机器".到"面向过程".再到"面向对象"的一个过程.而JavaScript是一 ...

  3. Javascript面向对象基础(二)

    一: 用定义函数的方式定义类在面向对象的思想中,最核心的概念之一就是类.一个类表示了具有相似性质的一类事物的抽象,通过实例化一个类,可以获得属于该类的一个实例,即对象.在JavaScript中定义一个 ...

  4. javaScript面向对象基础

    最近学习了js的面向对象,为了能让自己更好的理解,这一篇博客就当作是加深自己学习印象的总结(可能会有很多不足,欢迎指正). js通过函数来创建对象,而且js本身也是一种对象,那么什么又是对象呢,对象包 ...

  5. javascript面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

    面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下来将为大家讲解在JS中面向对象的实现.   工厂 ...

  6. JavaScript面向对象基础语法总结

    1.Javascript的 对象(Object): //例子:var car = { , , }; 2.使用构造函数来创建对象. //例子: var Car = function() { ; ; ; ...

  7. JavaScript基础精华02(函数声明,arguments对象,匿名函数,JS面向对象基础)

    函数声明 JavaScript中声明函数的方式:(无需声明返回值类型) function add(i1, i2) {             return i1 + i2;//如果不写return返回 ...

  8. JavaScript 面向对象开发知识基础总结

    JavaScript 面向对象开发知识基础总结 最近看了两本书,书中有些内容对自己还是很新的,有些内容是之前自己理解不够深的,所以拿出来总结一下,这两本书的名字如下: JavaScript 面向对象精 ...

  9. javascript的基础知识及面向对象和原型属性

    自己总结一下javascript的基础知识,希望对大家有用,也希望大家来拍砖,毕竟是个人的理解啊 1.1 类型检查:typeof(验证数据类型是:string) var num = 123; cons ...

随机推荐

  1. XJOI1571爱心蜗牛【树形动规】

    爱心蜗牛 猫猫把嘴伸进池子里,正准备"吸"鱼吃,却听到门铃响了.猫猫擦了擦脸上的水,打开门一看,那人正是她的好朋友--川川.川川手里拿着一辆玩具汽车,对猫猫说:"这是我的 ...

  2. as3中textField输入字符时,一次性过长后自动换行

    txt_show.text = showStr; var str:String = txt_show.text; var strlen:int = str.length; var len:int = ...

  3. AngularJS1.X学习笔记14-动画(解读文档)

    最近在看算法分析,那个大O啊,小o啊,分治法啊(目前就看到这里),真是搞死了.这回呢休息一下,学学AngularJS动画,上一篇文章根据自由男人的书简单谈到了动画的话题,发现反响很大(好吧,我说慌了, ...

  4. C#7的新语法

    阅读目录 out变量 元组(Tuples) 模式匹配(Pattern matching) 本地引用和返回(Ref locals and returns) 本地函数(Local functions) 表 ...

  5. iOS UITableViewCell点击时子视图背景透明的解决方法

    在做iOS项目的开发中,UITableView控件的应用十分广泛.在进行自定义UITableViewCell时,经常遇到这样的问题:在UITableViewCell上面添加了一个有背景颜色的子视图,当 ...

  6. C++学习笔记1(标准的输入输出)

    前言: 个人一直以来比较懒,最近才准备记录一下自己学习C++的学习过程,希望自己能在写博客的时候能够坚持下去,欢迎大家在博客中支出存在的问题,好了不多说了,自己能坚持下去.我准备在我的博客中通过与C语 ...

  7. Nodejs进阶:MD5入门介绍及crypto模块的应用

    本文摘录自<Nodejs学习笔记>,更多章节及更新,请访问 github主页地址.欢迎加群交流,群号 197339705. 简介 MD5(Message-Digest Algorithm) ...

  8. html基础认识,高手别看

    HTML5是一种用于在万维网上构建和呈现内容的符号言语.它是HTML规范的第五和当时版别.它是由万维网联盟(W3C)在十月发布的2014 [ 2 ] [ 4 ]和最新的多媒体支持进步言语,一起坚持它简 ...

  9. SQLiteServer+SQLiteClient 用于.Net项目的SQLite服务端程序和客户端类库

    SQLite没有官方的支持CS方式调用的方式,因项目需要我自行开发了一个简易的版本. 当前版本支持的方法 SQLiteOpen(fileName):bool SQLiteClose():void SQ ...

  10. VueJS 事件修饰符

    事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()是非常常见的需求.尽管我们可以在 methods 中轻松实现这点,但更 ...