js 面向对象 原型和原型链

本文主要是介绍js 面向对象 原型和原型链，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

数据类型分类和判断

分类

• 基本（值）类型
  • String ：任意字符串
  • Number : 任意数字
  • boolean : true/false
  • undifined : undifined
  • null : null
• 对象（引用）类型
  • Object : 任意对象

      var obj = {
          name : '张三',
          age : 20
      };
  

  • Function : (一种特殊的对象) 函数

  var fn = function(){
      console.log("hello world!");
  }
  fn();
  

  • Array : (一种特殊的对象) 数组

  var arr = [1,2,3]
  

判断

• typeof
  • 可以判断： undifined / 数值 / 字符串 / 布尔值 / function
  • 不可以判断 null与object array和object null和array都会返回object

//1.基本
//typeof 返回数据类型的字符串表达
var a ;
console.log(a , type a , type a==='undifined' , a === undifined);
console.log(undefined===='undefined');
a = 4 ;
console.log(typeof a==='number');
a = '张三';
console.log(typeof a==='string');
a = null;
console.log(typeof a===null); //false null的typeof 是 'object'

• instanceof (instance - 实例)
  • 判断对象的具体类型

var obj = {
    name : "张三",
    age : 20
};
var fn1 = function(){
    console.log("hello world !");
};
var arr = [1,2,3];
console.log(obj instanceof Object , obj instanceof Array); // true , false
console.log(arr instanceof Array , arr instanceof Object); // true , true
console.log(fn instanceof Function , fn instanceof Object); //true true 因为函数也是一种特殊的对象

console.log(typeof fn ==='function'); //true

• ===
  • 可以判断undifined 和 null

注意的问题

• undefined 与 null 的区别
  • undifined代表定义未赋值
  • null是给变量赋值给null
• 什么时候给变量赋值为null
  • 初始赋值为null , 表明将要赋值为对象
  • 结束前赋值为null,让对象成为垃圾对象（被垃圾回收机器回收）

数据 - 变量 - 内存

• 什么是数据

  • 存储在内存中代表特定信息，本质上是二进制代码
  • 一小块内存的两个数据
    • 内部存储的数据
    • 地址值
  • 内存分类
    • 栈：全局变量/局部变量
    • 堆：对象

        var obj = { name : 'tome'} // obj在栈空间中（变量名和对象存在堆空间中的地址） ， {}中的内容在堆空间中
    

  • 数据的特定： 可传递 ； 可运算 ；

• 什么是内存

  • 用于存储数据的空间

• 什么是变量

  • 可变化的量 ， 由变量名和变量值组成
  • 每个变量都对应的一块内存，变量名来查找到对应的内存，变量值是内存中保持的数据
    

• 内存，数据，变量三者直接的关系

  • 内存是用来存储数据的空间（临时）
  • 变量是内存的标识

注意的问题

• js引擎如果管理内存
  • 内存生命周期
    • 分配小内存空间，获取使用权
    • 存储数据，可以反复进行操作
    • 释放小块内存
  • 释放内存
    • 局部变量:函数执行完自动释放
    • 对象：成为垃圾对象（没有变量指向）==>垃圾回收器回收

      function fn(){
          var obj = {};
      }
      fun(); //b是自动释放，b所指向的对象在后面的某个时刻被垃圾回收器回收
  

对象

• 什么是对象
  • 多个数据的封装体
  • 用来保存多个数据的容器
  • 一个对象代表显示事件中的一个事物
• 为什么要用对象
  • 统一管理多个数据
• 对象的组成
  • 属性 ： 属性名（字符串）和属性值（任意类型）组成
  • 方法 ： 一种特别的属性（属性值是函数）
• 如何访问对象内部数据
  • .属性名
  • ['属性名'] 当属性名包含特殊字符：- 空格只能用这种方式获取

函数

• 什么是函数
  • 实现特定的功能的n条语句的封装体
  • 只有函数是可以执行的，其他类型的数据不能执行
• 为什么要用函数
  • 提高代码的复用
  • 便于阅读
• 如何定义函数
  • 函数声明 function fn1(){}
  • 表达式 var fn2 = function(){} //区别是会变量提升
• 如何调用函数
  • test() 直接调用
  • obj.test() 通过对象调用
  • new test() new调用
  • test.call/applay(obj) : obj.test() //临时让test的方法变成obj的方法调用

    var obj = {
        name : 'jack'
    };
    function setName(){
        this.name = 'tom';
    }
    //obj.setName() 
    setName.call(obj); //可以让一个函数成为知道任意对象的方法被调用
    console.log(obj.name);

回调函数

• 什么是回调函数
  • 自定义的
  • 没有调用却执行了
• 常见的回调函数
  • dom事件的回调函数
  • 定时器回调函数
  • ajax请求回调函数
  • 生命周期回调函数

IIFE

• Immediately-Invoked Function Expression
  • 立即调用函数表定式
• 作用
  • 隐藏实现
  • 不会污染外部（全局）命名空间
  • 用它来编写js模块

    (function(){ //匿名函数
        var a =3 ;
        console.log(a+3);
    })();

    var a = 1;
    console.log(a)
    (function(){ //匿名函数
        function test(){
            consol.log(++a);
        }
        function test2(){
            console.log('test2');
        }
        window.$ = function(){ //向外暴露一个全局函数
            return {
                test : test 
            }
        }
    })();
    //1.$是一个函数 2.$执行后返回的是一个的对象
    $().test;
    

函数的prototype

• 函数的prototype属性
  • 每个函数都有一个prototype属性，它都默认指向一个Object空对象（即称为：原型对象）
  • 原型对象中有一个属性constructor,它指向函数对象
• 给原型对象添加属性（一般都是方法）
  • 作用：函数的所有实例对象自动拥有原型中的属性（方法）

function fun(){
    
}
fun.prototype.test = function(){
    console.log('----test----');
}
console.log(fun.prototype); //默认指向一个Object空对象
console.log(fun.prototype === fun); //true

//给原型对象添加属性（一般是方法） ===>实例的对象可以访问
var f = new fun();
f.test();

显示原型与隐式原型

• 每个函数都有一个prototype属性，即显示原型（属性）
• 每个实例对象都有一个__proto__，可称为隐式原型
• 对象的隐式原型的值是对应构造函数的显性对象的值

  //定义构造函数
  function fun(){ //内部语句：this.prototype = {}
  
  }
  //创建实例对象
  var f = new fun() // 内部语句： __proto__ = fun.prototype
  //给原型添加方法
  fun.prototype.test = function(){
      console.log("--test--");
  };
  //通过实例调用方法
  f.test();
  

• 内存结构
• 

原型链

• 原型链
  • 访问一个对象的属性时
    • 先在自身属性中查找，找到返回
    • 如果没有，再沿着__proto__这条链向上查找
    • 如果最终没有找到，返回undifined
  • 别名：隐式原型链
  • 作用：查找对象的属性方法
  • 原型上的属性和方法是提供给原型链上的实例使用的，原型的继承也是通过原型链
• 图解

console.log(Object);
console.log(Object.prototype);
console.log(Object.prototype.__proto__); //null
function Fn(){
	this.test1 = function(){
		console.log('test1');
	}
}
var fn = new Fn();
Fn.prototype.test2 = function(){
	console.log('--test2--');
}
fn.test1();
fn.test2();
console.log(fn.test3) //undifined
fn.test3(); //报错 fn.test3不是一个方法

注意

• 函数的显示原型指向对象的空Object实例对象（但Object不满足）

function Fn (){
    
}
console.log(Fn.prototype instanceof Object); //true
cosole.log(Object.proptotype instanceof Object); // false
cosole.log(Fuction.proptype instanceof Object);//true

• 所有函数都是Function的实例（包含Function本身）

instanceof

• instanceof 是如何判断的？
  • 表达式：A instanceof B
  • 如果B函数的显示原型对象在A对象的原型链上，返回true

这篇关于js 面向对象 原型和原型链的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！